Apple’s website is always full of small innovative details and fancy CSS3 transitions. Designers talk about the clean and simple interface, while front-end developers wonder how some of these elements were created.
Today we will recreate the new Apple navigation using jQuery Greensock. If you look at it in a desktop browser, you will see a nice elastic animation between the two slides and that’s our goal for today.
It all started last week when I saw this pretty dribbble shot. I immediately felt the urge to convert it into a working clock and share it with Tutorialzine’s readers. If you’d like to learn how I made it, read on!
To make the clock work, we will have to use jQuery to generate the markup for each of the digits, and set a timer to update the classes every second. To make our lives easier, we will use the moment.js library to compensate for the lacking JavaScript native date and time functions.
lazyBlock is a proof-of-concept to show how content can be conditionally loaded in responsive designs without relying on AJAX to fetch that content. Content is included in the original mark-up but is placed within <script> tags with the type text/html. Based on user action or screen width, the content can then be moved from the <script> tag and then injected into the DOM by lazyBlock.
Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of JavaScript to add/remove effect classes.
ZoomBox 2 – The Photographer’s Lightbox ! What makes ZoomBox unique to the other lightbox scripts ? In short – quality, user-friendliness, design and social media connectivity. Take a look at the demos and be convinced.
Features:
I’ve been playing with a layout that needed an good looking dropdown menu, so I’ve decided to create one myself, and also created this tutorial, hopefully it will prove to be useful to those who needs similar drop down menu. We will be creating 3 level sub menus in pure CSS, it should work without any JavaScript, and at the end we will add jQuery for that sliding effect.
In this tutorial we learn how about loading database records automatically when user scrolls down to the bottom of the page? The technique can be seen in Twitter, Facebook and several other websites. Let’s use examples from previous article, with some modification we can create Ajax based auto loading script, which loads records when user scrolls to bottom of the page.
A simple jquery sliding plugin, supporting responsive design, keyboard and touch navigation.
Features:
