Code Monkey home page Code Monkey logo

arzucaner / js-slide-in-on-scroll Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 210 KB

The project consists of a series of coding challenges that gradually introduce concepts related to creating and animating elements in JavaScript. Participants will learn how to use the Intersection Observer API to detect when an element enters and exits the viewport, and how to use CSS transitions and animations to create smooth sliding animations.

HTML 50.36% JavaScript 26.14% CSS 23.50%
css html javascript

js-slide-in-on-scroll's Introduction

JS Slide in-on Scroll


The "JavaScript JS Slide-in-on-Scroll" project is part of Wes Bos's "JavaScript30" challenge series. In this particular project, participants learn how to create animations that slide elements into view as the user scrolls down a webpage.

The project consists of a series of coding challenges that gradually introduce concepts related to creating and animating elements in JavaScript. Participants will learn how to use the Intersection Observer API to detect when an element enters and exits the viewport, and how to use CSS transitions and animations to create smooth sliding animations.

Throughout the project, participants will work with various CSS properties and selectors, including transform, translateX, and translateY, as well as JavaScript methods such as getBoundingClientRect() and Array.from(). They will also learn how to manipulate the DOM to add and remove classes and styles dynamically.

By the end of the "JavaScript JS-slide-in-on-scroll" project, participants will have a solid understanding of how to create animations that slide elements into view as the user scrolls down a webpage, and will be able to apply this knowledge to their own JavaScript projects. They will also have gained experience working with the Intersection Observer API and manipulating the DOM in JavaScript.

js-slide-in-on-scroll's People

Contributors

arzucaner avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.