CodePen'de Yapılmış En Etkileyici 10 Çalışma

Adobewordpress ailesi olarak CodePen‘i çok seviyoruz ve sık sık örneklerimizi orada oluşturuyoruz. Biz web geliştiriciler için hazırlanmış interaktif bir oyun sahası olan CodePen’de milyonlarca fikri barındırmakta. Ama bunlardan bazıları var ki yaratıcılık ve teknik bilginin birlikte tavan yaptığında ne sonuçlar doğurabileceğini bize gösteriyor.

Bugün sizler için CodePen’in en dikkat çekici 10 çalışmasını derledik.

CodePen’in en beğenilen 10 çalışması

Bu liste CodePen’in en beğenilen çalışmalarını içeren 3 yıllık derlemeden seçilmiş, sıralama ise içerdiği yaratıcılık ve fonksiyoneliteye göre tarafımızdan yapılmıştır.

1.Solar System

Güneş sistemimizin işleyişini kusursuz bir şekilde SASS ile hazırlayan Malik Dellidj ortaya etkileyici bir iş çıkarmış. Özellikle bu listeyi ben oluşturan Vatanay Özbeyli uzay bilimiyle kendince haşır neşir olduğunu da göz önüne alınırsa Malik’in çalışmasının en üstte olması kaçınılmaz 🙂 Dünyanın kendi ekseni etrafında bir turu 30 saniye olarak tanımlanmış. Eğer onu 86400 olarak değiştirseniz de gerçek verileri gösteren bir dijital uzay haritasına sahip olursunuz. Hem de sadece SASS ile yapılmış olanına. İnanılmaz değil mi?

Tam sayfa görüntüle

2. Tearable Cloth

Hazır bilimle başlamışken yine bilimle devam edelim. Fizik kurallarını koda döken dissimulate, mükemmel bir örnek ile karşınızda. Sol tuş ile dokunabileceğiniz kumaşı sağ tuşla da kesebilirsiniz. Kesinlikle denemenizi öneririz.

Tam sayfa görüntüle

3. JS Cloud

Sırada JavaScript ile hazırlanmış bulutlar mevcut. Mouse ile ekranda gezinmeniz halinde bulutlar 3 boyutlu olarak döneceklerdir.

Tam sayfa görüntüle

4. Gravity Points

Başında saatler geçirebileceğiniz bir diğer çalışma da yer çekimi noktacıkları. Kendi çekim alanlarınızı hatta kara deliklerinizi oluşturabileceğiniz bu çalışma size maddenin ve atomun manyetik hareketini de göstermekte. Bilim güzel birşey değil mi? Farenizin sol tuşuyla ekrana tıklamanız bir çekim kuvveti oluşturmanız için yeterli olacaktır.

Bu da ilginizi çekebilir Yapışkan (Sticky) header nasıl yapılır?

Tam sayfa görüntüle

5. Simple Vertigo Effect

Bu örneği daha önce bizde yapmıştık aslında farklı bir yöntemle. “CSS ile Odaklanma” makalemizi okuyabilir ve örneğimizi inceleyebilirsiniz. Ancak bu listeyi biraz da tarafsız oluşturabilmek için tarafımızdan hazırlanmış çalışmaları eledik.

Tam sayfa görüntüle

6. Kinda Realistic Effect

Gerçekçi bir yazı efektiyle listemize devam ediyoruz.

Tam sayfa görüntüle

7. Triangle Pattern Generator

Üçgenlerden oluşan renk geçişli desenler. Gayet şık bir arkaplan uygulaması.

Tam sayfa görüntüle

8. Particles.JS

Daha önceleri benzer bir tasarımı birlikte hazırlamıştık. Particles.js sayesinde özellikle data gösterimlerini şık ve etkileşimli olarak yapabilirsiniz. Sol tuşla da yeni partiküller eklenebiliyor.

Tam sayfa görüntüle

9. Firewatch Parallax

Çok şık bir parallax efekti daha. Renkler, perspektif, geçişler ve kod kalitesi muazzam. Aşağı doğru scroll etmeniz yeterli.

Tam sayfa görüntüle

10. Checkwave

İlk incelendiğinde mayın tarlası ile karıştırılabilen bir tasarım. Checkboxlardan oluşan bol efektli ve etkileşimli bir dalga.

Tam sayfa görüntüle

Bitirmeden önce

CodePen bir yayınmış gibi belirli aralıklarla incelenesi bir web sitesi. Hem fikir hem de teknik bilgi edinmek için birebir. Adobewordpress’in resmi CodePen hesabına erişmek, örneklerimizi incelemek ve üstlerinde denemeler yapmak için burayı tıklabilirsiniz.