All posts tagged “Scrolling”

Infinite and Endless Scrolling: Discussing Pros & Cons

first image of the post
Infinite scrolling or endless scrolling promises better user experience. However, advantages are often accompanied by disadvantages. Once you have understood the strengths & weaknesses of endless scrolling, you can use it to enhance your site’s interface. Though the success of continuous scrolling on various social media websites has made it popular among the people, but […]

The post Infinite and Endless Scrolling: Discussing Pros & Cons appeared first on Designer Daily: graphic and web design blog.

Download the free transport icons package now!


Designer Daily: graphic and web design blog

15 fantastic examples of parallax scrolling websites

first image of the post
Technology is never constant and so is the web design and development. With the latest web standards like HTML 5 and CSS3, it has been possible to create interesting and eye-catchy effects in browsers. One of the examples is the parallax illusions which have made the web design even more appealing. Parallax scrolling involves the […]

The post 15 fantastic examples of parallax scrolling websites appeared first on Designer Daily: graphic and web design blog.

Download the free transport icons package now!


Designer Daily: graphic and web design blog

5 vertical scrolling trends for 2015

Read more about 5 vertical scrolling trends for 2015 at CreativeBloq.com


2014 was the year that vertical scrolling bubbled through from burgeoning fad to mainstream trend. With awesome advertising, prime portfolios and crafted content all benefiting from single page scrolling, it’s now certain that the technique is here to stay. This was the year designers took control of the technique, pushing the boundaries of what could be achieved. We’ve come a long way from Snow Fall – the New York Times microsite that kickstarted the trend in 2010.




Creative Bloq

50 great parallax scrolling websites

Read more about 50 great parallax scrolling websites at CreativeBloq.com


With new technologies like HTML5 and CSS3, it’s becoming possible to create more advanced, interesting and remarkable effects in the browser. While these effects can be gimmicky, when employed in the right way they can result in a remarkable and memorable website.




Creative Bloq

50 great parallax scrolling websites

Read more about 50 great parallax scrolling websites at CreativeBloq.com


With new technologies like HTML5 and CSS3, it’s becoming possible to create more advanced, interesting and remarkable effects in the browser. While these effects can be gimmicky, when employed in the right way they can result in a remarkable and memorable website.




Creative Bloq

The Ultimate Guide to Parallax Scrolling: Best Practices, Examples and Tutorials

The idea of parallax design is simply an awareness of movement. More specifically, the word ‘parallax’ is used to describe the perception of distance between objects while moving along a line of…

Click through to read the rest of the story on the Vandelay Design Blog.


Vandelay Design

10 impressive parallax scrolling web designs

first image of the post
The website design has evolved drastically with time and today, parallax effects are adding extra beauty to every website. Parallax scrolling is a perfect scrolling technique where background images move at a slower rate to the foreground images, creating an illusion of depth, while scrolling down the page and adding to the immersion. There are […]

The post 10 impressive parallax scrolling web designs appeared first on Design daily news.

Download the free transport icons package now!


Design daily news

11 Amazing Code-Free Parallax Scrolling Sites

Parallax is one of those amazing design techniques that can turn any website into a real masterpiece. If you want to make such site on your own but coding is not your style here is what you can do…
MonsterPost

A Simple Parallax Scrolling Effect Tutorial

In this tutorial, we take a look at a beautiful parallax scrolling effect in the simplest of ways, with stationary backgrounds and scrolling content.

A Brief Introduction

Parallax is an effect where the position of an object seems to be different when viewed from different positions. Parallax motion, or in our case, parallax scrolling, then gives us the illusion that two objects in the same line of sight, but with distance between them, seem to move at different speeds. If you’ve ever looked out a car window while driving at 100 km per hour down a highway, you’ll notice that the electricity poles seem to zip by at a high pace, while the mountains in the background seem to move by really slowly, almost at a standstill. This is parallax motion in action.

As far as the web goes, we can induce a parallax effect on containers that have background images and text above them. In its simplest form, parallax scrolling will cause the content to scroll as normal, and the background to remain stationary. The beauty about this technique in its simplest form is that it only requires CSS. Let’s dig in.

The Markup & Structure

If you had a fixed with site that was non-responsive, then there would be no trickery to achieve this. We’re in the age of responsive web design though, so that’s a no-go. Fear not! We have some nice CSS at our disposal. But first, a look at some markup. The markup is simple – we’ll have alternating background/heading-text sections and content sections for maximum effect. Here’s what it looks like:

<section class="module parallax parallax-1">
  <div class="container">
    <h1>Serene</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>

<section class="module parallax parallax-2">
  <div class="container">
    <h1>Rise</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>

<section class="module parallax parallax-3">
  <div class="container">
    <h1>Calm</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>

Each section with a class of parallax will contain our background images and heading text, while each section with a class of content will be simple content-containing sections. The container class is a fluid div with a maximum width, making the responsiveness of it all very simple. Now, let’s dig into the CSS.

Styling & Making It Work With CSS

The first point to note is that all of my background images have a width of 1600px and height of 600px. That allows me to set my parallax sections to a fixed height of 600px. There’s a bit more than that to it though. Because I don’t want repeating backgrounds (I’m using big and bold images), I can’t always expect users to be at maximum width (which will allow the background images to be in full view). Luckily for us, we can utilise the CSS background-size property, and set it to cover. This forces the background image to occupy the total available space by expanding it proportionally. It needs to be prefixed for maximum support though, so be mindful of that.

So far so good, except for the most important thing. We need our background image to remain fixed in place while our content scrolls past it. Again, CSS makes life easy for us. We utilise the background-attachment property and set it to fixed. Simple! Here’s what my CSS looks like, with some example media queries:

/* ============================================================
  PRIMARY STRUCTURE
============================================================ */
.container {
  max-width: 960px;
  margin: 0 auto;
}
/* ============================================================
  SECTIONS
============================================================ */
section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
  padding: 40px 0;
}
section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  background-image: url("../img/demo/_small/1.jpg");
}
section.module.parallax-2 {
  background-image: url("../img/demo/_small/2.jpg");
}
section.module.parallax-3 {
  background-image: url("../img/demo/_small/3.jpg");
}

@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
}

Browser Support & Property Info

Browser support in general is really great. IE8 and down won’t support the background-size property, but a simple conditional style should take care of that. Apart from that , everything is supported and you shouldn’t have any issues. For more info on the CSS properties used in this tutorial, check out the MDN:

Wrap Up

Here, we’ve implemented something that is simple, effective, and a bit different from the ordinary everything-scrolling-at-once kind of look. We utilised some nice but lesser-known CSS techniques to achieve our desired effect. And that’s a wrap! Don’t forget, you can view the demo and download the source by clicking the links below, and if you have and questions, comments, or feedback, you can also leave them below.

The post A Simple Parallax Scrolling Effect Tutorial appeared first on Speckyboy Design Magazine.


Speckyboy Design Magazine

Webydo Launches Its Code-Free Parallax Scrolling Animator

Parallax scrolling has been making headlines in our industry for a couple of years now. Even big influencers have made advances in parallax scrolling animator, one of the most impressive and original of these being Webydo, which has recently added the Parallax Scrolling Animator to its code-free design suite. Readers of FFF can be among the first to create a parallax scrolling site with Webydo’s code-free design studio. Simply head over to Webydo and sign up for an account so that you too can create a code-free parallax site.

Once you sign up for Webydo’s invitation, make sure that you read through the tips below for parallax scrolling so that you can properly implement the maximum effect for the most impact.

What is Parallax Scrolling?

Parallax scrolling has been around since the 1980s in 2D video games when the forefront graphics moved at a different speed than the background. In web design, parallax scrolling works a lot like video games in that different elements on the page move at different speeds. This creates a 3D effect and adds depth and interest to a website.

The problem now is that parallax scrolling has been both overdone and done badly, which means that some designers are shying away from the effect. And often, parallax sites include issues in site speed, mobile use, SEO, and usability. With these considerations in mind, has the parallax scrolling trend run its course?

Actually, many would argue that parallax is here to stay, rather than just a passing fad. As with most trends, there are solutions to the problems it initially has shown, as Zack Rutherford points out in his UX Magazine article. Parallax can provide a useful tool in creating ”wow factor” and allowing designers to stretch their legs creatively. Webydo made parallax available to its users exactly for these reasons.

How can Parallax boost professional website design?

Let’s face it – parallax scrolling just looks cool. It keeps users engaged, provides an interactive feel to a design, and overall keeps visitors on a page longer, which in turn can increase conversions.

Unleashed Technologies describes parallax scrolling as a technique that takes “the user experience to a new interactive level of online viewing.” Used in a story-like layout, parallax is a solution for web designers in creating websites that are more appealing to visitors.

Examples of Parallax.

The Sony store website shows just how creative you can get with parallax scrolling. When you create a parallax scrolling site with Webydo’s professional design studio, keep in mind the techniques used on the Sony Be Moved page. It begins with an introduction to the story of their company, and as viewers scroll down through the site, the story unfolds via parallax.

While scrolling, the parts of a Sony product “float” together to show how the technology came to be. The interesting part is that one funky part is thrown in, such as the lollipop mixed in with the parts that make up Sony’s mobile phone camera lens attachment. Users can click the + button to read interesting tidbits. It’s little extras like these that really make a site unique.

Site speed and mobile problems.

Two negatives of parallax involve mobile compatibility and site speed. Fortunately, Webydo’s parallax animator is optimized for quick load speed and mobile compatibility, so users don’t have to worry about these aspects.

And Sony shows another way that designers can further speed up a website: it does not try to keep all of the content on a single page. Its menu at the top of the page leads to product pages, an easy aspect Webydo users can also implement.

SEO and usability problems.

Two more complaints of parallax scrolling designs are poor SEO and usability. SEO problems are usually due to designers simply leaving this consideration out of a design, which is why Webydo makes it easy to include important SEO factors like meta-tags.

To avoid usability issues, simply use Webydo’s advanced design suite to add in factors such as chapter buttons. Sony kept the buttons inconspicuous – descriptions only pop open when users hover the mouse over each chapter button.

Is it just a fad or here to stay?

The difference between a fad and trend is that a fad passes quickly but a trend remains for more than just a season. Parallax Scrolling has been in web design for a while now, which is a good indicator that it’s here to stay.

It is true that parallax is an intimidating design style to learn, especially with no code experience. But this is why so many designers are taking up the chance to create their clients websites with Webydo’s code-free parallax scrolling animator. One designer even created a Game of Thrones teaser site for “Death Is Coming”. Now the possibilities are limitless, so you can create your site today with Webydo and join the growing community of 95K professional designers around the world who designing with Webydo.

This article is presented by Webydo’s community of professional designers.

FormFiftyFive – Design inspiration from around the world » Features