Параллакс прокручивается только с помощью CSS?

Я работаю над проектом, и я покончил с контентом. Для дизайна, однако, я думаю об использовании техники прокрутки параллакса.

Однако все, что я смог узнать об этом, было с JavaScript или JQuery, тогда как я только владею CSS3.

Может ли прокрутка parallax быть реализована только с помощью CSS3 (при необходимости HTML5), вместо использования jquery-плагинов? Было бы неплохо, если бы я мог указать на некоторые учебники для того же самого.

Примечание. Это близко к эффекту, который я хочу создать (http://jessandruss.us/)

Ответ 1

Мне действительно нравится ответ KitKats, но, как предположил Рой Принс, было бы очень полезно свести его к основным требованиям, чтобы точно видеть, что достаточно для создайте этот эффект. Ive сделал это здесь.

Чтобы создать очень простой эффект прокрутки параллакса, достаточно следующего примера. Обратите внимание, что префиксы браузера, резервные копии и т.д. не были устранены. Значения CSS, отмеченные /* e.g. */, могут быть изменены по усмотрению дизайнеров.

Смотрите разветвленное перо здесь.

<html><head><style>
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  body {
    perspective: 1px; /* e.g. */
  }
  .background {
    transform:
      translateZ(-.4px)
      scale(.6)
      translateX(-104%)
      translateY(-40%)
      rotate(-5deg); /* e.g. */
  }
  .foreground {
    transform:
      translateZ(.25px)
      translateX(50%)
      scale(.75)
      rotate(2deg); /* e.g. */
  }
</style></head><body>
  <img class="background"/>
  <img class="foreground"/>
</body></html>

Небольшая коррекция ответа KitKats: Кажется, что не нужно transform-style:preserve-3d (по крайней мере, в Chrome) и что эффект скорее зависит от bodys overflow:auto. Удалите это, и параллакс не удастся.

Ответ 2

Поиск parallax pure css и нажатие на первый результат из CodePen (второй результат - текущая страница:), хороший пример отображается с фоном фиксированный и прокруткой. Для записи я размещаю здесь исходный код, поддерживая Chrome, Safari и Opera.

В примере, как представляется, есть два типа фона:

фиксированный, с background-attachment: fixed в нужном элементе, например #slide2
прокрутка, transform: translateZ(-1px) scale(2) перед нужным элементом, например #slide1

Кроме того, эффект прокрутки, по-видимому, зависит от настройки transform-style: preserve-3d of body для правильной работы. (IE, кстати, не существует поддержки transform-style.)

Наконец, различные скорости прокрутки могут быть достигнуты путем настройки свойства transform, как и два элемента img в примере.

Исходный код:

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title> Pure CSS Parallax Scrolling </title>
    <!-- Copyright (c) 2014 by Keith Clark -->
    <style>
        @import url(http://fonts.googleapis.com/css?family=Nunito);
        html {
            height: 100%;
            overflow: hidden;
        }
        body { 
            margin:0;
            padding:0;
            perspective: 1px;
            -webkit-perspective: 1px;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
            font-family: Nunito;
        }
        h1 {
            font-size: 250%
        }
        p {
            font-size: 140%;
            line-height: 150%;
            color: #333;
        }
        .slide {
            position: relative;
            padding: 25vh 10%;
            min-height: 100vh;
            width: 100vw;
            box-sizing: border-box;
            box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
            -webkit-transform-style: inherit;
            transform-style: inherit;
        }
        img {
            position: absolute;
            top: 50%;
            left: 35%;
            width: 320px;
            height: 240px;
            -webkit-transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
            transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
            padding: 10px;
            border-radius: 5px;
            background: rgba(240,230,220, .7);
            box-shadow: 0 0 8px rgba(0, 0, 0, .7);
        }
        img:last-of-type {
            -webkit-transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
            transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
        }
        .slide:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left:0;
            right:0;
        }
        .title {
            width: 50%;
            padding: 5%;
            border-radius: 5px;
            background: rgba(240,230,220, .7);
            box-shadow: 0 0 8px rgba(0, 0, 0, .7);
        }
        .slide:nth-child(2n) .title {
            margin-left: 0;
            margin-right: auto;
        }
        .slide:nth-child(2n+1) .title {
            margin-left: auto;
            margin-right: 0;
        }
        .slide, .slide:before {
            background: 50% 50% / cover;  
        }
        .header {
            text-align: center;
            font-size: 175%;
            color: #fff;
            text-shadow: 0 2px 2px #000;
        }
        #title {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-6.jpg");
            background-attachment: fixed;  
        }
        #slide1:before {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-4.jpg");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }
        #slide2 {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-3.jpg");
            background-attachment: fixed;
        }
        #slide3:before {
            background-image: url("http://lorempixel.com/output/abstract-q-c-640-480-5.jpg");
            -webkit-transform: translateZ(-1px) scale(2);
            transform: translateZ(-1px) scale(2);
            z-index:-1;
        }
        #slide4 {
            background: #222;
        }
    </style>
</head>
<body>
    <div id="title" class="slide header">
        <h1>Pure CSS Parallax</h1>
    </div>
    <div id="slide1" class="slide">
        <div class="title">
            <h1>Slide 1</h1>
            <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
        </div>
    </div>
    <div id="slide2" class="slide">
        <div class="title">
            <h1>Slide 2</h1>
            <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
        </div>
        <img src="http://lorempixel.com/output/abstract-q-c-640-480-6.jpg">
        <img src="http://lorempixel.com/output/abstract-q-c-640-480-4.jpg"> 
    </div>
    <div id="slide3" class="slide">
        <div class="title">
            <h1>Slide 3</h1>
            <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p>
        </div>
    </div>
    <div id="slide4" class="slide header">
        <h1>The End</h1>
    </div>
</body>

Ответ 3

Вы должны иметь возможность получить хотя бы частичный эффект, используя переходы CSS. Однако, как отметил Алехандро, CSS не обнаруживает свиток.

Взгляните на "Прохладный эффект прокрутки Parallax" в Pure CSS3! "(http://css.dzone.com/articles/cool-parallax-scrolling-effect).

Ключ используется для внутренних ссылок на страницы. Поэтому вместо прокрутки пользователь будет нажимать ссылку на странице, а затем страница будет прокручиваться вверх/вниз до нового раздела. При прокрутке страницы переходы обеспечивают эффект параллакса.

Ответ 4

<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>
</head>
<body>

<p>Scroll Up and Down this page to see the parallax scrolling effect.Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.</p>

<div class="parallax"></div>

<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

</body>
</html>

Вот codepen

Ответ 5

Да, если вам нужен простой базовый эффект параллакса, тогда будет достаточно CSS3 правило @keyframes (не так параллакс), но снова, как и другие, упомянутые, если вы хотите использовать параллакс в полной мере, javascript является обязательным. Я всегда давал вам ссылки для обоих способов. Не стесняйтесь проверять их и использовать то, что вы хотите.

Чистый CSS3:

http://jasonlau.biz/home/css/parallax-effect-using-only-css-with-no-javascript/* с ключевыми кадрами */

http://css.dzone.com/articles/cool-parallax-scrolling-effect/* без ключевых кадров */

С помощью JQuery:

http://potentpages.com/parallax-tutorials/

http://www.webdesignerdepot.com/2013/07/how-to-create-a-simple-parallax-effect/

http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

http://www.1stwebdesigner.com/css/create-scrolling-parallax-website/

Надеюсь, что это помогло

Ответ 6

ДНК Параллакс /CSS Ключевые кадры Параллакс Аниматор

Этот параллакс использует стандартную CSS-анимацию (используя @keyframes at-rule) для определения эффектов прокрутки. Вам не нужно знание JavaScript.

Нужно всего лишь включить 2 файла конфигурации без конфигурации (jquery + плагин DNA Parallax CSS), которые будут автоматически запускать анимацию @keyframes для элемента при прокрутке...