Coding Fun Html Pure CSS Parallax Scrolling | No JavaScript | HTML & CSS

Pure CSS Parallax Scrolling | No JavaScript | HTML & CSS





// Parallax Effect Using CSS | No JavaScript Needed //

Thanks For Watching !

—————- Social Media —————-

Personal Account :

Facebook :
Instagram :
Twitter :

Song :
CloZee – Dream Big
Video Link :

Credits…

Tags: , , , , , , , , , , , , , , , , , , , , ,

29 thoughts on “Pure CSS Parallax Scrolling | No JavaScript | HTML & CSS”

  1. Codegrid says:

    These are some of the books that can help you learn web designing –

    1. Web Design with HTML, CSS, JavaScript and jQuery Set – https://amzn.to/2T3WViK

    2. HTML 5 Black Book (Covers CSS3, JavaScript, XML, XHTML, AJAX, PHP, jQuery) 2ED. – https://amzn.to/2DtVBAo

    3. JavaScript and JQuery: Interactive Front–End Web Development – https://amzn.to/2R78ofJ

    4. Web Animation using JavaScript: Develop & Design (Develop and Design) – https://amzn.to/2AZ3vQF

    5. Mastering SVG: Ace web animations, visualizations, and vector graphics with HTML, CSS, and JavaScript – https://amzn.to/2S1dj6p

  2. My photo covered up the entire screen, how do i fix this?

  3. sumanito says:

    perspective: 1px
    and transform-style: inherit giving me warnings*. there is a solution?

    im using javabeans latest version**

  4. what font did you use in atom text editor?

  5. Why Luna font is not working in mines?

  6. Hi Codegrid im loving your vids!! keep it up!! but I have 1 question what you use for coding? Sublime?

  7. Guy Lemay says:

    Gee wheez… I wonder how much you pay for that wonderful Luna font?
    All I can do now is use the following html code:

    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/akiza-sans"
    type="text/css"/>

    However, it doesn't reproduce the same result!
    Please sir, could you provide me with the right html code, so I can too enjoy this wonderful font!!

  8. Ya H says:

    Not working in Firefox, Edge and IE

  9. Oscar says:

    Activate Windows. Go to settings to activate windows

  10. 0x0r00t says:

    min-height: 100vh;
    vh ?

  11. Parallax is a trend I just don't get. I hope it does soon.

  12. Music is amazing ♥️

  13. What effect did you use for the video intro?

  14. Brooks Gunn says:

    You didn't say how to insert "Activate Windows". 🙁

  15. Hidden Place says:

    Activate your windows masbro

  16. XUL says:

    This might help you to do even more advanced effects easily with pure CSS animation definitions: https://github.com/webdevelopers-eu/DNA-Parallax

  17. DeathStar98 says:

    What's this editor.

  18. Adit Sapkota says:

    Just keep your background fixed…..thats it

  19. Why are you using pseudo stuff…cant we create a div and work with that …pls explain why are you using this approach…i m new to this and pseudo classes are giving hard time especially before and after

  20. Can somebody help me? The parallax works but I don't know how to insert the lorem ipsum part.

  21. saasung says:

    html {
    height: 100%;

    overflow: hidden;

    }

    body {

    color: #fff;

    padding: 0;

    margin:0;

    perspective: 1px;

    transform-style: preserve-3d;

    height: 100%;

    overflow-y: scroll;

    overflow-x: hidden;

    font-family: "Arial";

    }

    header {

    box-sizing: border-box;

    min-height: 100vh;

    padding: 30vw 0 5vw;

    position: relative;

    transform-style: inherit;

    width: 100vw;

    }

    header h1{

    margin-top: -100px;

    }

    header, header:before {

    background:50% 50% / cover;

    }

    header ::before {

    bottom:0;

    content:"";

    left:0;

    position: absolute;

    right:0;

    top:0;

    display: block;

    background-image: url();
    // URL <———–
    background-size: cover;

    transform-origin: center center 0;

    transform: translate(-1px) scale(2);

    z-index: -1;

    min-height: 100vh;

    }

    header * {

    font-weight: normal;

    letter-spacing: 0,2em;

    text-align: center;

    margin: 0;

    padding: 1em 0;

    }

  22. Tenho um tutorial de parallax no Android

    https://youtu.be/dHrw0yB_ku4

  23. can't you explain it dude………

  24. Franck Bujna says:

    How to add some text after this effect because the text scroll with the header so i can't add other text in the bottom of the header

  25. Hi! Is this applicable for video background?

  26. Zira says:

    Activate windows

  27. Dragonbreak says:

    Hmm… I see an illegal windows or a changed motherboard….

  28. use linux bro, is better, and thanks! ☕

Leave a Reply

Your email address will not be published. Required fields are marked *