background preloader

Create a Cool Website with Fancy Scrolling Effects

Create a Cool Website with Fancy Scrolling Effects
I’m sure we’re all familiar with the popular parallax effect in web design. It has become a great tool to create a fun browsing experience that responds to the user’s controls as they scroll up and down the page. In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects. This tutorial will be a walkthrough of my design process for a simple portal site that presents all of my websites and social profiles. Each website has its own individual section in a series of ‘slides’ laid out vertically. View the final fancy scrolling website Before jumping into any code flesh out your design in Photoshop and develop each individual slide. Begin exporting all the required imagery ready for creating the design in HTML and CSS. In some sections of my design I use a large background image. <! Create a simple HTML document and add an unordered list to the body. Related:  Front-endoutils web

Parallax Tutorial using CSS and jQuery How to implement parallax effects on scroll using CSS & jQuery Ever wondered how to achieve parallax effects on scroll? I'll show you how simple it can be, using CSS & a bit of jQuery. Performance Aims Minimise DOM interactions on scroll events.Ideally we should only be interacting with the parallax elements at the breakpoints (start & stop positions), so we can try to make use of CSS fixed positioning to accomplish the desired parallax effect. Mobile Problems/Considerations Previously I've referred to scroll events. Binding scroll and touchmove events As touchmove events stop when your finger leaves the screen, but the browser will continue to scroll for around a second as part of the 'slowing down' easing effect. A solution for this problem (well, more of a workaround), is to design your parallax effects with this in mind. Update 2: Check out my demo showing the scroll event problems on mobile! Demo time: Let's make the red brick fall down the page as we scroll! relative scroll top: 1

ScrollReveal.js, une librairie JS pour déclencher des animations au scroll ScrollReveal.js est une librairie JavaScript qui permet de déclencher l’apparition d’un élément HTML lorsqu’il « entre dans le viewport », autrement dit lorsque celui-ci devient visible à l’écran (chargement et scroll), notamment à l’aide d’une configuration utilisant un attribut data-* HTML5. « Animations… animations everywhere ! » Si vous cherchez des effets animés faciles à mettre en place pour enrichir votre site web, scrollReveal.js est fait pour vous ! Cette librairie JS propose des animations de type « fade » lorsqu’un élément apparait à l’écran. Pour chaque élément HTML que l’on veut animer, il faut configurer un attribut data-scrollReveal qui prend pour valeur plusieurs mots-clés qui vont définir le mouvement souhaité. ScrollReveal.js met alors en place les transitions et transformations CSS correspondantes, et ce peu importe l’élément choisi ; cela fonctionne aussi bien avec une image qu’avec une div contenant plusieurs balises. Utilisation de base

Fancy Scrolling Sites In the last year or so, there's been enough sites that do fancy things when you scroll down that it's kind of a trend. I thought I'd blog it, you know, for the sake of history. By "fancy things" I mean something happens when scrolling down besides the site scrolling down. Elements might move around in unexpected ways or change their size/shape/color/content in some way. It's easier to just experience some of these yourself than listen to me try to fumble through explaining it. These screenshots also don't do much justice. So how do they do that? JavaScript. Know any others? Add them in the comments. Share On A Simple Parallax Scrolling Technique Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I'll show you how I did it. In this tutorial, I'll teach you the simplest parallax scrolling technique you've ever came across, so let's dig in! This technique revolves around controlling the speed of background image. So let's begin with the HTML markup, creating two sections along with the required attributes: "data-type" and "data-speed". I am using the <section> tag with the attributes data-type & data-speed, which were introduced in HTML5. According to the specification for Custom Data Attributes, any attribute that starts with data- will be treated as a storage area for private data. I know what you're thinking: you're worried about IE. Now it should look like this...

Parallax.js | Simple Parallax Scrolling Effect with jQuery Installation Download and include parallax.min.js in your document after including jQuery. Useage Via data attributes To easily add a parallax effect behind an element, add data-parallax="scroll" to the element you want to use, and specify an image with data-image-src="/path/to/image.jpg". Via JavaScript To call the parallax plugin manually, simply select your target element with jQuery and do the following: Under The Hood What parallax.js will do is create a fixed-position element for each parallax image at the start of the document’s body. Due to the nature of this implementation, you must ensure that these parallax objects and any layers below them are transparent so that you can see the parallax effect underneath.

How to Customize the Breadcrumb Appearance in WooCommerce WooCommerce is a great plugin for enabling eCommerce within your WordPress website. It provides great functionality and easy-of-use. One great feature are breadcrumbs. Out of the box, WooCommerce has breadcrumbs that look pretty nice. Depending on the site you are building you may want to customize them. By default, they look something like this: This looks pretty nice. Tip: Add the following functions to your theme’s functions.php file or your custom functionality plugin to use them. Change the WooCommerce Breadcrumb Separator Here is the function listed in the WooCommerce documentation to change the separator; this will change the breadcrumb delimiter from ‘/‘ to ‘>‘: add_filter( 'woocommerce_breadcrumb_defaults', 'my_change_breadcrumb_delimiter' ); function my_change_breadcrumb_delimiter( $defaults ) { // Change the breadcrumb delimiter from '/' to '>' $defaults['delimiter'] = ' > '; return $defaults; } Here’s my end result. More Control over Breadcrumbs More Useful Breadcrumb Snippets

9 plugins jQuery pour réaliser des effets de parallaxe Tendance désormais bien ancrée dans le paysage du webdesign, le défilement parallaxe (ou scrolling différentiel) est une technique qui consiste à donner une impression de profondeur à travers des portions de décors défilant à vitesse variable. Voici une liste non exhaustive de 9 plugins jQuery pour mettre en place des effets de parallaxe sur votre site web. Superscrollorama, successeur de l’excellent Scrollorama, permet de réaliser de superbes animations et effets parallaxes lorsqu’on scroll sur une page web, notamment grâce aux transformations CSS3. Seulement quelques lignes de code pour un scrolling original et amusant. 2. jParallax jParallax est un plugin jQuery qui permet de mettre en place facilement un effet de parallaxe sur un groupe d’éléments HTML. 3. Curtain.js est un plugin jQuery permettant de réaliser une page web avec un défilement parallaxe des différentes sections sous forme de « panneaux ». 4.

TweakStyle - Your next Code Editor Crowdfunding campaign ended The crowdfunding campaign have now reached its deadline. Thanks to all of you, we have raised more than $8000.We're extremely grateful for that and we're going to do everything in our power to deliver the very best product for you all. What is TweakStyle? TweakStyle is an upcoming code editor for web designers and web developers, focused on frontend development. Why TweakStyle? Today, the usual web design workflow is heavility split. As a result TweakStyle breaks with standard code editors and introduces some unique features thought for web design packed with an unmatched user-friendly interface. What are our guidelines? We’re building a software to be used intensively everyday by demanding people. Features The video above presents only a few of the features TweakStyle offers and there are a lot more coming. Here’s an extract of features currently being developed And an extract of the ideas we have for the future Why a crowdfunding campaign? The best part: your perks

Free vector icons - SVG, PSD, PNG, EPS & Icon Font - Thousands of Free Icons

Related: