Slice Revealer
In Playground by Manoela Ilic
A reveal effect where animated slices cover and uncover an image. Inspired by Zhenya Rynzhuk’s transitions experiments.
#scroll
On-Scroll Morphing Background Shapes
In Playground by Manoela Ilic
A decorative website background effect where SVG shapes are morphing and transforming on scroll.
WebGL Scroll Spiral
In Playground by Xoihazard
A couple of decorative and inspirational WebGL background scroll effects for websites powered by regl. The idea is to twist some images and hexagonal grid patterns on scroll, creating an interesting effect.
Block Reveal Effects
In Playground by Manoela Ilic
Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath.
Animated Map Path for Interactive Storytelling
In Playground by Lucas Bebber
An interactive journey where a Canvas map path is animated according to the content that is scrolled on the page.
Sticky Table Headers & Columns
A tutorial on how to create sticky headers and columns for tables using jQuery. The solution is an alternative to other sticky table header approaches and it addresses the overflowing table problem including adding support for biaxial headers.
On Scroll Effect Layout
In Blueprints by Manoela Ilic
An on scroll effect template that animates the sides of sections once they are in the viewport.
On Scroll Header Effects
In Playground by Manoela Ilic
Some inspiration for headers that animate when scrolling the page.
On-Scroll Animated Header
In Blueprints by Manoela Ilic
A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.
Fixed Background Scrolling Layout
In Blueprints by Manoela Ilic
A fixed background image scrolling layout with 100% height panels and smooth scrolling.
Creative Layouts and Interactions in Web Design
In Articles by Carrie Cousins
Creative design that differ from the usual layouts can be quite difficult to imagine and execute but when done well, they can make some of the most interesting and engaging websites.
Photo Booth Strips with Lightbox
In Tutorials by Manoela Ilic
A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device friendly.
Lateral On-Scroll Sliding with jQuery
In Tutorials by Manoela Ilic
After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the option to move the elements in 3D space.
Website Tour with jQuery
In Playground by Manoela Ilic
Today we want to share a little script with you that allows to create a tour on a website with jQuery. This can be very useful if you want to […]
Pull Out Content Panel with jQuery
In Tutorials by Manoela Ilic
In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related content and it can be expanded […]
Smooth Vertical or Horizontal Page Scrolling with jQuery
In Tutorials by Manoela Ilic
In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be […]
Scrollable Thumbs Menu with jQuery
In Tutorials by Manoela Ilic
In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a vertical […]
Scrolling to the Top and Bottom with jQuery
In Playground by cody
Here’s a way to scroll to the top or bottom of your website with a simple click. I have used the jQuery special scroll events from James Padolsey, and some […]