Member Avatar for Member #986332

Hey guys,

Today I came across a Beautiful Webpage! Well atleast I consider it to be. I hope most of you might have heard of Ed-Vantage programme by Microsoft; this website is for students from India.

http://www.microsoft.com/india/edvantage/student/default.aspx

Please take a look at it. You will see the pictures in the site move as you scroll. I have seen similar one at site. I have also seen some blogs that use a lake like background in which fishes seem to move while scrolling.

I wanted to know how such animations are created as we scroll. I am a complete newbie in terms of Website design and development. Please help me!

PS: Just did a google search and found it to be called as Parallax Scrolling Ex: Spotify. Please help me to create such beautiful sites.

Thanks in advance,
Ladis

Edited by Member #986332
  • 4 Contributors
  • 5 Replies
  • 329 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by TonyG_cyprus

Dani AI

Generated

Good find, — that scrolling effect is a layered scroll animation (commonly called parallax) that gives depth by moving elements at different speeds. Keep the approach simple and progressive: start with a static layout, add a single moving layer, then generalize. was right to suggest iterating and posting code when stuck; that is the fastest way to learn. 's tip to try plugins is useful too, but try a tiny vanilla example first so you understand what the plugin does for you. Ignore Flash for this kind of effect — use CSS + JS.

A minimal, performant pattern is: drive transforms (translate) on the compositor thread, throttle updates with requestAnimationFrame, and use passive scroll listeners. Example:

<div class="parallax" data-speed="0.3"></div>
.parallax { will-change: transform; transform: translateZ(0); }
const els = document.querySelectorAll('[data-speed]');
let latestY = 0, ticking = false;

function onScroll() {
  latestY = window.scrollY;
  if (!ticking) {
    requestAnimationFrame(update);
    ticking = true;
  }
}

function update() {
  els.forEach(el => {
    const speed = parseFloat(el.dataset.speed) || 0.5;
    el.style.transform = 'translateY(' + (latestY * speed) + 'px)';
  });
  ticking = false;
}

if (!window.matchMedia || !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  window.addEventListener('scroll', onScroll, { passive: true });
}

Practical tips: animate only transform/opacity (not top/left), limit the number of animated elements, lazy-load large images (IntersectionObserver), and respect users who prefer reduced motion. Test on real low-end phones — mobile performance is the usual failure point. If you need richer control or pinning, step up to well-maintained libraries (vanilla-first: small tools like Rellax or full-featured: GSAP ScrollTrigger), but only after you understand the basics. When you have a small demo, paste the code here and people can point out concrete fixes.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

Ladis,

As you can imagine, helping you build a site via a resonse in a thread is not realistic. In addition, you may find that various members of this site have strengths in different areas of web development so asking a general question like "help be create this site" isnt going to result in getting much help.

You are better off, doing some research, start building the site and as you run into challanges, come back, post some of your code that you are having trouble with, and get help. Then go back build some more, come back, open a new thread and get more help.

Every once in a while, stop for a moment, and give someone else some help.

following that advice is more likely to get you to your goal.

Member Avatar for Member #986332

JorgeM,

Thanks for the response. I was immediately attracted to websites that use Parallax Scrolling and so I posted here to get some help to start developing web pages. I just want the right direction to start with - like a tutorial that is simple to help newbies like me.

Thanks,
Ladis

Member Avatar for madelinekim

This site is really nice and looking awesome with animated objects. I love this site very much, using a reliable designing tool like adobe dreamweaver, photoshop, flash you can do a lot of innovative and attractive things which attracts people to your site.

Member Avatar for Member #986332

I think flash wasn't used here

Member Avatar for TonyG_cyprus

just google 'jq parallax' , download one and play! They are quite simple if you take the time to read the sample or demo code, change a bit and view your changes. Do that a few times and you'll begin to understand how to integrate into a site.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.