### EFFECTS ###
⭐ ⭐ ⭐ ⭐
by Mary Lou | December 5, 2011
"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.
tutorial demo source
⭐ ⭐ ⭐ ⭐
by Mary Lou January 9, 2012
Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.
tutorial demo source
⭐ ⭐ ⭐
by Mary Lou | June 11, 2014
Recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.
tutorial demo source git
⭐ ⭐ ⭐ ⭐
by Mary Lou | April 5, 2012
Slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides.
tutorial demo source
⭐ ⭐ ⭐ ⭐
by Mary Lou | January 2, 2012
CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appear using CSS animations.
tutorial demo source
⭐ ⭐ ⭐
by Mary Lou | October 12, 2011
Simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We'll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.
tutorial demo source
⭐ ⭐ ⭐
by Mary Lou January 7, 2014
The hover effect as seen on The Christmas Experiments website. We'll be using SVG for the shape and Snap.svg for animating it on hover.
tutorial demo source git
⭐ ⭐ ⭐ ⭐
by Mary Lou | October 19, 2011
Experiment with text shadows and with transitions in order to achieve a blur effect that we'll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering
tutorial demo source
⭐ ⭐ ⭐ ⭐
by Mary Lou | July 3, 2011
This menu will have several panels, each one corresponding to a different background image that will show on all panels when we hover over a panel label. Also, a submenu will slide out from the bottom. This menu comes with some configuration possibilities, such as size of the image, the hover effect and custom default states.
tutorial demo source
⭐ ⭐ ⭐
by Mary Lou | November 7, 2011
Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.
tutorial demo source
⭐ ⭐ ⭐
by Mary Lou | March 13, 2014
A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.
tutorial demo source
`7MMF'
MM
MM `7MMpMMMb.pMMMb. ,6"Yb. .P"Ybmmm .gP"Ya
MM MM MM MM 8) MM :MI I8 ,M' Yb
MM MM MM MM ,pm9MM WmmmP" 8M""""""
MM MM MM MM 8M MM 8M YM. ,
.JMML..JMML JMML JMML.`Moo9^Yo.YMMMMMb `Mbmmd'
6' dP
Ybmmmd'
⭐ ⭐ ⭐ ⭐
by Mary Lou | September 12, 2011
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images.
tutorial demo source git
⭐ ⭐ ⭐ ⭐
by Mary Lou November 18, 2011
A neat image blur effect. Using canvas, we want to blur images on the transition to another one, creating a smooth effect.
tutorial demo source
⭐ ⭐ ⭐ ⭐
by Mary Lou | July 5, 2013
A tutorial on how to (ab)use custom data attributes and pseudo-elements for creating image captions.
tutorial demo source
⭐ ⭐ ⭐ ⭐
by Mary Lou | June 19, 2014
Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. tutorial demo source
⭐ ⭐ ⭐ ⭐
by Alessio Atzeni | November 2, 2011
Some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example
tutorial demo source
⭐ ⭐ ⭐ ⭐
by Mary Lou | August 23, 2011
A little zoom tour script. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the "zoom" effect by enlarging the current image and fading in the new one.
tutorial demo source
// == / EFFECTS IMAGE ==
,,
db db
;MM:
,V^MM. `7MMpMMMb. `7MM `7MMpMMMb.pMMMb. .gP"Ya
,M `MM MM MM MM MM MM MM ,M' Yb
AbmmmqMA MM MM MM MM MM MM 8M""""""
A' VML MM MM MM MM MM MM YM. ,
.AMA. .AMMA..JMML JMML..JMML..JMML JMML JMML.`Mbmmd'
⭐ ⭐ ⭐ ⭐
by Mary Lou | January 8, 2015
Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements.
tutorial demo source
⭐ ⭐ ⭐ ⭐ ⭐
by Sara Soueidan | June 27, 2013
Some creative animations and transitions for adding and removing items from a list, inspired by the concept from Pasquale D'Silva's article on Medium. Chris Coyier coded the transitions from Pasquale's article.
In this tutorial I'm extending Pasquale's example, adding more animations and transitional effects, and I'll also be using a small snippet from Chris's article to add an extra step in each animation, which "makes room" for the added items before they are actually added.
tutorial demo source
⭐ ⭐ ⭐
by Rachel Smith | September 23, 2014
A collection of animated background header effects for your inspiration. We use Canvas and Javascript to create an animated background for large site headers.
tutorial demo source
⭐ ⭐ ⭐ ⭐ ⭐
by Mary Lou | March 18, 2014
Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations.
tutorial demo source
⭐ ⭐ ⭐ ⭐ ⭐
by Mary Lou | August 6, 2013
An inspirational collection of experimental link effects mostly using transitions on pseudo-elements.
tutorial demo source
⭐ ⭐ ⭐ ⭐
by Mary Lou | May 22, 2014
Some inspiration for effects applied to title headers of articles with a fullscreen image. The idea is to show some creative transition when continuing to the article body.
tutorial demo source
http://callmenick.com/post/animated-resizing-header-on-scroll
http://tympanus.net/codrops/2014/12/23/sliding-header-layout/ https://github.com/codrops/SlidingHeaderLayout
⭐ ⭐ ⭐ ⭐
by Lucas Bebber | April 8, 2015
Create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.
tutorial demo source git
⭐ ⭐ ⭐ ⭐ ⭐
by Author | Januar 1, 2015
A simple automatic quotes rotator with progress bar and example media query.
tutorial demo source
⭐ ⭐ ⭐ ⭐
by Mary Lou | August 16, 2011
Simple circular content carousel. The idea is to have some content boxes that we can slide infinitely (circular). When clicking on the "more" link, the respective item moves to the left and a content area will slide out. Now we can navigate through the carousel where each step will reveal the next or previous content box with its expanded content. Clicking on the closing cross will slide the expanded content area back in and animate the item to its original position.
tutorial demo source
⭐ ⭐ ⭐
by Mary Lou | October 24, 2011
Some creative menu hover effects in today's tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We'll be exploring some different effects for the elements.
tutorial demo source
tutorial ⭐ ⭐ ⭐ ⭐ / by Mary Lou | July 16, 2013 headers that animate when scrolling the page
tutorial demo source
tutorial ⭐ ⭐ ⭐ ⭐ / by Brian Gonzalez | October 30, 2013 lower article easing upward as the current article fades up and out tutorial demo source
tutorial ⭐ ⭐ ⭐ ⭐ / by Mary Lou | May 22, 2014
Effects applied to title headers of articles with a fullscreen image. The idea is to show some creative transition when continuing to the article body
tutorial demo source
animate.css (to animate) http://daneden.github.io/animate.css/
// == / EFFECTS ANIMATION ==
//==========================================================================
,, ,,
.M"""bgd `7MM `7MM
,MI "Y MM MM
`MMb. ,p6"bo `7Mb,od8 ,pW"Wq. MM MM
`YMMNq. 6M' OO MM' "'6W' `Wb MM MM
. `MM 8M MM 8M M8 MM MM
Mb dM YM. , MM YA. ,A9 MM MM
P"Ybmmd" YMbmd' .JMML. `Ybmd9'.JMML..JMML.
//==========================================================================
⭐ ⭐ ⭐
by Mary Lou | September 30, 2011
Hide the scrollbar of elements in a website and only show it when the user really needs it like at the activity feed in Facebook.
tutorial demo source
Medium inspired
source
// == / EFFECTS SCROLL ==
//==========================================================================
,, ,,
`7MMF' `7MF'db `7MM
`MA ,V MM
VM: ,V `7MM ,M""bMM .gP"Ya ,pW"Wq.
MM. M' MM ,AP MM ,M' Yb 6W' `Wb
`MM A' MM 8MI MM 8M"""""" 8M M8
:MM; MM `Mb MM YM. , YA. ,A9
VF .JMML.`Wbmd"MML.`Mbmmd' `Ybmd9'
//==========================================================================
⭐ ⭐ ⭐ ⭐ Create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video. tutorial demo source
// == / EFFECTS VIDEO ==
//==========================================================================
,, ,,
`7MM"""Mq. `7MM `7MM
MM `MM. MM MM
MM ,M9 ,6"Yb. `7Mb,od8 ,6"Yb. MM MM ,6"Yb. `7M' `MF'
MMmmdM9 8) MM MM' "'8) MM MM MM 8) MM `VA ,V'
MM ,pm9MM MM ,pm9MM MM MM ,pm9MM XMX
MM 8M MM MM 8M MM MM MM 8M MM ,V' VA.
.JMML. `Moo9^Yo..JMML. `Moo9^Yo..JMML..JMML.`Moo9^Yo..AM. .MA.
//==========================================================================
⭐ ⭐ ⭐ ⭐ ⭐
by Sebastiano Guerriero | MARCH 25, 2015
A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.
tutorial demo source
⭐ ⭐ ⭐ ⭐
by Mary Lou | March 15, 2012
A simple parallax content slider with different animations for each slider element and a background parallax effect. The idea for this comes from the slider of the Kendo UI homepage.
tutorial demo source
#effects_parallax Pure CSS Parallax Websites
tutorial ⭐ ⭐ ⭐ ⭐ / how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website / see comments! http://keithclark.co.uk/articles/pure-css-parallax-websites/ http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/ http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3-webkit-overflow-fix/ http://codepen.io/keithclark/details/JycFw/
#Создаем сайт с эффектом Parallax, используя Stellar.js http://habrahabr.ru/post/145772/ http://pavel.shimansky.ru/parallax_effect/ http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src.zip
#effects_parallax Simple parallax scrolling tutorial
tutorial ⭐ ⭐ ⭐ ⭐ ⭐ / by Petr Tichy how to setup your html for a parallax website how to animate background image at a different speed then page scrolling how to precisely control the timing and duration of your animations. https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/ http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/ http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial-s.zip #effect_parallax How To Create A Parallax Scrolling Website https://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/ http://ihatetomatoes.net/demos/parallax-scroll-effect/
#effects_parallax A Simple Parallax Scrolling Technique
tutorial ⭐ ⭐ ⭐ + http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641 http://cdn.tutsplus.com/net/uploads/legacy/2138_SimpleParallax/Demo/index.html http://cdn.tutsplus.com/net/uploads/legacy/2138_SimpleParallax/source.zip
#effect_parallax Creating Scrolling Parallax Effects with CSS3
tutorial ⭐ ⭐ ⭐ ⭐ / parallax with background-attachment: fixed Article demo
#effects_parallax Advanced Parallax Scrolling Effect
tutorial ⭐ ⭐ ⭐ / parallax scrolling effect with a background image moving at a different speed to the content above it http://callmenick.com/post/advanced-parallax-scrolling-effect http://callmenick.com/_development/advanced-parallax-effect http://callmenick.com/_development/advanced-parallax-effect/advanced-parallax-effect-source.zip #effects_parallax Simple Parallax Scrolling Effect http://callmenick.com/2014/07/15/simple-parallax-scrolling-effect/ http://callmenick.com/_development/simple-parallax-effect/ http://callmenick.com/_development/simple-parallax-effect/simple-parallax-effect-source.zip
#effects_parallax How to implement parallax effects on scroll using CSS & jQuery
tutorial ⭐ ⭐ ⭐ / create parallax effects on scroll, by Andy Shora http://andyshora.com/parallax.html
// == / EFFECTS PARALLAX ==
//=============================================================================
`7MMM. ,MMF'
MMMb dPMM
M YM ,M MM ,6"Yb. ,pP"Ybd ,pW"Wq.`7MMpMMMb. `7Mb,od8 `7M' `MF'
M Mb M' MM 8) MM 8I `" 6W' `Wb MM MM MM' "' VA ,V
M YM.P' MM ,pm9MM `YMMMa. 8M M8 MM MM MM VA ,V
M `YM' MM 8M MM L. I8 YA. ,A9 MM MM MM VVV
.JML. `' .JMML.`Moo9^Yo.M9mmmP' `Ybmd9'.JMML JMML..JMML. ,V
,V
OOb"
//=============================================================================
tutorial ⭐ ⭐ ⭐ / overview by Joshua Johnson http://designshack.net/articles/css/masonry/ http://stackoverflow.com/questions/22742354/how-create-grid-out-of-images-of-different-sizes
#effects_masonry Seamless Responsive Photo Grid
tutorial ⭐ ⭐ ⭐ ⭐ / by Chris Coyier https://css-tricks.com/seamless-responsive-photo-grid/ http://codepen.io/team/css-tricks/pen/pvamyK
#effects_masonry - Cascading grid layout library http://masonry.desandro.com/ http://masonry.desandro.com/masonry-docs.zip http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js https://github.com/desandro/masonry
#effects_masonry Google Grid Gallery
tutorial ⭐ ⭐ ⭐ ⭐ / by Mary Lou March 21, 2014 A responsive Masonry grid with a gallery view using 3D Transforms. Based on the gallery seen on the Chromebook Getting Started guide by Google. http://tympanus.net/codrops/2014/03/21/google-grid-gallery/ http://tympanus.net/Blueprints/GridGallery/ http://tympanus.net/Blueprints/GridGallery/GridGallery.zip
tutorial + + / responsive e-commerce grid http://tympanus.net/codrops/2013/05/17/product-grid-layout/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+tympanus+%28Codrops%29 http://tympanus.net/Blueprints/ProductGridLayout/ http://tympanus.net/Blueprints/ProductGridLayout/ProductGridLayout.zip remake
⭐ ⭐ ⭐ ⭐
by Mary Lou | April 15, 2015
A responsive, magazine-like website layout with a grid item animation effect that happens when opening the content
tutorial demo source
⭐ ⭐ ⭐ ⭐
by Mary Lou | May 15, 2014
A tutorial on how to achieve the grid loading effect seen on the "Design Samsung" site. The effect will show a colored element sliding in first and then sliding out again, revealing the image.
tutorial demo source git
// == / EFFECTS MASONRY ==
//==========================================================================
.M"""bgd mm
,MI "Y MM
`MMb. mmMMmm ,6"Yb. `7MMpMMMb.pMMMb. `7MMpdMAo.
`YMMNq. MM 8) MM MM MM MM MM `Wb
. `MM MM ,pm9MM MM MM MM MM M8
Mb dM MM 8M MM MM MM MM MM ,AP
P"Ybmmd" `Mbmo`Moo9^Yo..JMML JMML JMML. MMbmmd'
MM
.JMML.
//==========================================================================
http://mattbradley.github.io/livestampjs/
// == / EFFECTS STAMP ==