roll.js is a little js library (~8kb, no dependencies) to help you keep track of position, scrolling, and pagination. For basic usage Simply create a new instance, specifying the viewport sizeand for DOM Usage keep track of scrolling in a DOM element, and then do pagination or animation based on scroll position. Here’s a DOM scrolling demo Here’s a Canvas demo
This is an experimental rain and water drop effects made with WebGL and shown in different demo scenarios.The idea is to create a very realistic looking rain effect and put it in different scenarios.In this article, you’ll see an overview of the general tricks and techniques used to make this effect. Please note that the effect is highly experimental and might not work as expected in all browsers. Best viewed in Chrome.
Ocssipital is a lightweight and reusable CSS grid boilerplate that can be used in any project at any time. Compared to other systems, Ocssipital’s one and only focus is providing a flexible grid that is deeply customizable enabling you to use your own classes and breakpoints. Ocssipital focuses on grids, and does not provide any extra code related to UI elements. Built for designers, find in Ocssipital a great tool and partner to help you…
Readable is a small jQuery plugin to help you make your paragraphs, well, more readable. It injects styling between the 45th and 75th character of every tag on your page. There are 3 files required to get Readable working on your site. 2 of them are inside the readable folder and the other is jQuery.(readable.css (2 kilobytes) and readable.js (794 bytes))
This is a tutorail to cretae a CSS animated intro section for your website.CSS animation is agreat way to grab the user’s attention to a specific section of the website.One section you want to make sure to highlight is the main tagline, with the action buttons. A good use of typography and a wise choice of colors should do the trick. By default, the intro content is hidden by setting its opacity to zero, then…
This is some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element. Animation is at the top element of a stack by clicking on an accept or reject button.These kind of animations can fit into many scenarios involving all kinds of card stacks that don’t necessarily have a dual logic. Some of the CSS techniques we use are only supported…
Round slider (also can call as Circular slider, Radial slider) is a jQuery plugin that allows the user to select a value or range of values. Not only a round slider, it supports the quarter, half and pie circle shapes also. Due to the flexibility of roundSlider, the user can do any customization based on their requirement. Here, some examples for the basic customization.By customizing the CSS styles we can make different appearances. It supports…
A mobile “pull to share” interaction that allows to share a page by using the familiar “pull to refresh” movement. It’s based on the action for refreshing and opening/closing a tab in Google Chrome for mobile. You can create a pull-to-share interaction that is based on the same Google Chrome interaction on iOS for opening/closing a new tab or refreshing the current tab. The sharing interaction in this experiment will do the following: when at…
It’s easy to create a website. You can do it with website builders from your phone, these days; or you could create a website at Websitebuilder.com in under 30 minutes. But being able to write in code allows you to include impressive elements to increase presentation, form, and function of any website. Parallax images and fullscreen videos are all the rage in web design these days, and for good reason: they have a lot of…
A template for a simple page stack navigation based on the Dribbble shot by Ilya Kostin. The idea is to show a navigation when clicking on the menu button and transform all pages in 3D and move them to the bottom of the viewport. The next two pages are shown in the back of the current page as a stack. When clicking on a menu item, the respective page comes up.