Разное

Параллакс на css: Как сделать параллакс — Блог HTML Academy

23.05.2023

Содержание

javascript — Как сделать параллакс показа текста в css?

Нужно создать такой параллакс эффект
Не могу понять как создать такой параллакс. Нужно чтобы при скроле проявлялся текст.

  • javascript
  • html
  • css
  • svg

2

Решить задачу можно с помощью анимации маски SVG.

  1. Нижний слой будет красный прямоугольник с текстом.
  2. Верхний слой будет фиолетовый прямоугольник, к которому применена маска с набором окружностей, у которых fill="black" При закраске чёрным цветом маска прорезает верхний слой и становится виден нижний красный слой сквозь эти отверстия.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
        <!-- Маска -->
   <mask>
    <rect fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>       
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  />  
 
</svg>

Теперь можно сделать параллакс

Для этого нужно просто двигать маску:

#1.

Горизонтальный параллакс

Начало анимации после клика

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
   <mask>
   <g>
    <rect  fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>   
         <!-- Анимация движения маски -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.click"
        dur="4s"
        values="0 0;400 0"
        fill="freeze"
        restart="whenNotActive" />  
    </g>      
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  >
        
       </rect>    
         
</svg>

#2. Вертикальный параллаксм

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
   <mask>
   <g>
    <rect  fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>   
         <!-- Анимация движения маски -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.click"
        dur="4s"
        values="0 0;0 100"
        fill="freeze"
        restart="whenNotActive" />  
    </g>      
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  >
        
       </rect>    
         
</svg>

#3. Вертикальный параллакс с возвратом

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
   <mask>
   <g>
    <rect  fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>   
         <!-- Анимация движения маски -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.click"
        dur="4s"
        values="0 0;0 100;0 100;0 0;0 0"
        repeatCount="indefinite"
        restart="whenNotActive" />  
    </g>      
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS</text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  >
        
       </rect>    
         
</svg>

Update

Анимация движения текста

В этих примерах маска неподвижна, двигается сам текст

#1. По горизонтали

<!-- Анимация движения текста -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.click"
        dur="6s"
        values="0 0;300 0;0 0"
        fill="freeze"
        restart="whenNotActive" />  

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
   <mask>
  
    <rect  fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>   
              
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS
     <!-- Анимация движения текста -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.
 
 click"
        dur="6s"
        values="0 0;300 0;0 0"
        fill="freeze"
        restart="whenNotActive" />  
    </text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  >
        
       </rect>    
         
</svg>

#2. По вертикали

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 400 100" >   
   <mask>
  
    <rect  fill="white" /> 
     <g fill="black">      
      <circle cx="0" cy="5" r="30"  /> 
        <circle cx="100" cy="90" r="30"  /> 
         <circle cx="200" cy="-25" r="80"  /> 
            <circle cx="320" cy="50" r="32"  /> 
               <circle cx="405" cy="90" r="30" /> 
        </g>   
              
    </mask>  
        <!-- Красный фон с текстом -->
    <rect fill="#FE5F55" />    
    <text x="200" y="65" text-anchor="middle" font-size="48px" font-weight="700" fill="white">BIOS
     <!-- Анимация движения текста по вертикали -->
      <animateTransform
        attributeName="transform"
        type="translate"
        begin="svg1.
 
 click"
        dur="4s"
        values="0 0;0 50;0 -30"
        fill="freeze"
        restart="whenNotActive" />  
    </text>
              <!-- Синий маскирующий прямоугольник -->
      <rect mask="url(#msk)" fill="#8E5DF8"  >
        
       </rect>    
         
</svg>

3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Параллакс эффект в CSS | Блог Makeomatic: разработка сайтов и мобильных приложений

Существует несколько путей создания параллакс эффекта при прокрутке страницы. Большинство примеров, которые вы найдете на StackOverflow или на подобных сайтах, содержат отдельно двигающиеся слои или дивы, движение которых инициируется jQuery- обработчиком события onscroll данного документа.

Эта статья описывает наиболее эффективный путь решения проблемы, который позволяет достичь высокой производительности и сделать код разметки семантически понятным и более простым в поддержке.

История появления параллакс эффекта

Для начала немного слов о параллакс эффекте прокрутки
Параллакс эффект- старая технология симуляции глубины вида в компьютерных играх. Она стала популярной в 1982 года, с появлением первой игры («Moon Patrol»), в которой данный эффект был применен на практике. Основная идея заключается в том, что объекты, которые находятся дальше движутся медленнее по отношению к объектам, находящимся ближе и воспроизводя данный эффект, мы можем получить аналогичное ощущение 3D на наших двумерных экранах.

Приветствуем CSS3 и TranslateZ

Сейчас у нас есть сильные встроенные инструменты в CSS3, которые позволяют нам обращаться к GPU напрямую и, вместо использования JS для управления нашими элементами по одному, мы можем управлять ими, изменяя всего лишь один параметр, а это значит- лучшую производительность и быстродействие.

Проблема мобильных устройств с эффектом parallax

К сожалению, все еще нет ни одного хорошего способа воспроизвести данный эффект на мобильных устройствах по той причине, что событие “scroll” происходит только в тот момент, когда вы закончили прокручивать контент. Это происходит потому, что во время прокрутки GPU всего лишь двигает “скриншот” экрана.

Решение для легкого создания параллакс эффекта

Основной фокус в том, чтобы расположить каждый элемент с корректным Z индексом относительно нормальной глубины (которая равна 0),
translateZ: -30px
Добавьте глубины к вашему элементу body

body{ -webkit-perspective: 500; -webkit-perspective-origin: 0 0; }

Теперь осталось только обновитель исходную точку обзора в момент прокрутки страницы. Это значит, что все элементы будут двигаться индивидуально с помощью графического процессора, а такты центрального процессора не будут впустую тратиться на обработку анимации. Поскольку вы двигаете угол обзора, вы можете также использовать этот метод, чтобы показывать реальные 3D: графики, точки на карте, тени, отражения или другие классные вещи, которые вы сможете придумать.

После того как вы примените верную глубину для ваших элементов, просто добавьте эту строчку для обработки изменения точки обзора:

1
2
3
4
5
html5
<script>
window.onscroll = function(){
document.body.style.webkitPerspectiveOrigin =  window.scrollX + "px " + window.scrollY + "px";
} </script>

Demo parallax

Работающая демо версия в webkit — метод, который поддерживается всеми основными браузерами с HTML5 (IE10+, Safari, Chrome и Firefox). Сейчас демо-версия оптимизирована под Webkit, но я планирую, чтобы она работала и в остальных браузерах:
[Demo] (http://codepen.io/irony/full/gIhky)

Удачи в работе с гипнотическими эффектами!

Design a Parallax Webpage using HTML & CSS

< html lang = "en" >

   

< Head >

< Стиль >

/ * СТИЛИЛЯ * /

/ * Стилисти0008

         * {

             поля: 0px;

             padding: 0px;

}

/ * Стилирование первого параллакса

Высота, ширина и фоновый цвет * /

. ПАЛИ0009

             ширина: 100%;

             высота: 600 пикселей;

             background: url(

             background-size: 100% 100%;

             background-attachment: fixed;

         }

   

         /* Стилизация заголовка первого параллакса */

         .parallax-1 h3 {

             margin: auto;

             Должность: родственник;

             слева: 500x;

             вверху: 300 пикселей;

             ширина: 250 пикселей;

             высота: 32 пикселя;

             отступ: 10 пикселей;

             цвет фона: черный;

             цвет: белый;

             text-align: center;

}

/ * Стилирование Второй параллакс

Высота, ширина и фоновый цвет * /

. 0009

         .parallax-2 {

             ширина: 100%;

             высота: 600 пикселей;

             background: url(

             background-size: 100% 100%;

             background-attachment: fixed;

         }

 

/ * Стилирование Название второго параллакса * /

. Pparallax-2 H3 {

Маржа: Auto;

             Должность: родственник;

             слева: 500x;

             вверху: 300 пикселей;

             ширина: 250 пикселей;

             высота: 37 пикселей;

             отступ: 10 пикселей;

             цвет фона: белый;

             цвет: черный;

             text-align: center;

             размер шрифта: 30 пикселей;

             семейство шрифтов: Verdana;

}

/ * Стилирование содержимого или параграфа * /

. PPARA-1 {

Padding: 50pa-1 {

.

             цвет фона: черный;

             цвет: белый;

             размер шрифта: 17 пикселей;

}

/ * Стилирование содержания или параграфа * /

.Para-2 {

.

             отступ: 25 пикселей;

             размер шрифта: 17 пикселей;

             семейство шрифтов: Verdana;

             цвет фона: черный;

             цвет: белый;

         }

     style >

head >

   

< body >

   

< Div Класс = "Parallax-1" >

< > SUSHANT GAURAV 989898989989

Div >

< Div Класс = "PARA-1" >

< P >

. краткий рассказ обо мне и

             этого веб-сайта. Мой путь к программированию 

             начался еще в 2019 году., 

             за несколько месяцев до начала обучения 

             изучение CSE в LNCT Bhopal.

Я в настоящее время нахожусь в своем втором

год и выполняю технический

СТРОИТЕЛЬНАЯ СТРОИТЕЛЬНАЯ. Мне нравится

Кодирование Все виды проблем

Из самых основных такими, как добавление

Номеры к сложным проблемам, таких как

Проблемы со конкурентоспособными программированием.

             Я люблю создавать проекты и игры.

             На самом деле этот веб-сайт является одним из моих

Проекты веб -разработки, которые

построены с использованием HTML и CSS.

             C++, JAVA, Python, JavaScript, 

             MySQL.< br 0008

             Структуры и алгоритмы, ООП, 

             HTML, CSS, LINUX, Git & GitHub.

         p >

     div >

   

    

     < div class = "parallax-2" >

         < h3 >PROJECTS h3 >

     div >

< Div Класс = "Пара-2" >

" >

"0008 < p >

              Calendar ☀  

             Tic-Tac-Toe ☀  

             Quiz Game ☀  

             Survey Form ☀  

             Чат-бот на C ☀  

             Веб-страница Tribute ☀  

9 000 6     70008 веб-сайт портфеля ☀

Угадайте номер ☀

Стрега для рок-бумаги ☀

Список дел с использованием JS ☀

Nate Cashing с использованием JS ☀

 .

             Калькулятор ИМТ с использованием JS ☀ 

             Кредитный калькулятор с использованием JS ☀  

             Travel Management System ☀  

             Random Password Generator ☀  

             Different Management Systems

         p >

     < / дел >

   

    

     < div class = "parallax-1" >

         < h3 >ACHIEVEMENTS h3 >

     Div >

< Div Класс = "Пара-2" >

         < p >

              Technical Content Writer 

             Intern at GeeksForGeeks ☀

              Microsoft Learn Student 

             Ambassador - Beta ☀  

             Участник GirlScript Summer 

             of Code 2021 ☀  

             Mentored HackTX Hackathon

         p >

     div >

корпус >

   

25 умопомрачительных эффектов параллакса CSS (бесплатный код + демонстрации)

1.

CSS-сетка параллакса

Я использовал parallax.js для настройки этой интерактивной панорамной сетки изображений. Использует позицию курсора, если вы находитесь на настольном компьютере или ноутбуке.

Автор: Кейси Каллис (caseycallis)

Ссылки: Исходный код/демонстрация

Создано: 14 июня 2017 г.

Сделано: J90,

с HTML0009

Теги: параллакс, html, css, интерактивный

2. 3D CSS эффект глубины параллакса карты и отдельные персонажи фильмов. Спасибо @alice-mx за улучшение математики calcValue.1130 2 ноября 2018 г.

Сделано с: HTML, SCSS, Babel

Tags: CSS-Transform, 3D Mouse, 3D-CS, MouseMove, CSS

3. Magdiellop Paralax, воспринятый с CSS

33333333333339122 3. MAGDIELLOP Paralax. Воссоздал Magdiellop 216 с помощью CSS и добавил эффект параллакса! Из: http://www.magdiellopez. com/a-poster-a-day-v2-1/pcaj6lyntffy2qud30qmxxv9dgu968 Оптимизировано для Google Chrome, некоторые проблемы возникают в Mozilla с "background-clip: text;"

Автор: Guilmain Dorian (Craaftx)

Ссылки: Исходный код / ​​демонстрация

Создана на: 30 ноября 2018

Сделано с: PUG, Less, JS

9125 CSSSSS PROCROSSOR. : Меньше

Дж.1125 Простой ванильный параллакс javascript.

Автор: OSCICEN (OSCICEN)

Ссылки: Исходный код / ​​демонстрация

Создано: 10 января 2019

Сделано с: HTML, CSS, JS

. параллакс, мышь, стекло, javascript, vanilla

5. Вырезка изображения, эффект параллакса: CSS + SVG

Автор: Alex O'Neal (alexoneal)

Ссылки: Исходный код / ​​Демо

Создан: 28 октября 2018 г.

Сделано с: HTML, CSS

6. CSS Parallax Shadows (Friendly)

Автор: Ян. Исходный код / ​​демо

Создано: 5 ноября 2018 г.

Сделано с помощью: HTML, CSS, JS

7. Эффект параллакса только с CSS

Javascript не требуется. Просто обычный CSS.

Автор: Yago Estévez (Yagoestevez)

Ссылки: Исходный код / ​​демонстрация

Создано: 6 октября 2018

Сделано с: PUG, CSS

29292929. Нет

Дж.1130 SIL VAN DIEPEN (Silvandiepen)

Ссылки: Исходный код / ​​демонстрация

Созданы: 8 октября 2018 г.

Сделано с: Pug, SCSS

Pre-Processess: SCSS

CSS Pre-Processor: . Препроцессор JS: None

Препроцессор HTML: Pug

Теги: parallax, cssonly, nojs, images

Как создать маски SVG: Импортируйте изображение в Illustrator (или любую другую векторную программу) Выберите изображение и измените размер монтажной области в соответствии с изображением Создайте слой для каждой части параллакса и нарисуйте белую фигуру, которая будет использоваться в качестве маски Каждый слой n .

..

Читать Подробнее

Автор: Jakob-e (Jakob-e)

Ссылки: Исходный код / ​​демонстрация, Jakearchibald.github.io

Создано: May 27, 2018

9929929

. with: HTML, SCSS, TypeScript

Теги: svg, parllax, css-переменные, маска, анимация

1125

Ссылки: Исходный код / ​​демонстрация

Создано: 25 июня 2018 г.

Сделано с: HTML, CSS

TAGS: CodePenchallenge, CPC-Figure

11. Pore CS-Effects

211. Pore Csallenge, CPC-Figure

12212 11. Pore Csallengh, CPC-Figure

12212

Автор: Джошуа Бемендерфер (Tribex)

Ссылки: Исходный код / ​​демонстрация

Создано: 9117

Сделано с: HTML, CSS

12.1129.1123

Следуя по учебному пособию по Codegrid

Автор: Carlos (Carlosvieira)

Ссылки: Исходный код / ​​демонстрация

Создано: May 3, 2018

929929 . CSS

13. Параллаксная прокрутка в чистом виде CSS

Прототип техники параллаксной прокрутки, в которой используются трехмерные преобразования CSS. Нет JavaScript! Статья об этой технике доступна здесь: http://keithclark.co.uk/articles/pure-css-parallax-websites/ Более новую версию можно найти здесь: http://codepen.io/keithclark/pen/vNqxQJ.

Author: Keith Clark (keithclark)

Links: Source Code / Demo

Created on: January 21, 2014

Made with: HTML, CSS

Tags: parallax

14. Эффект параллакса прокрутки CSS

Показывает, как добиться эффекта параллакса прокрутки с помощью CSS и HTML.

Автор: Себастьян Шепис (sschepis)

Ссылки: исходный код / ​​демонстрация

Создано: 15 июня 2014 г.

Сделано с: HTML, SCSS

Теги: CSS, Параллакс, Scolling Parallax, HTML5, Layoutathing

222222222222222222222222222222222222222222222222222222222222222222222222222н2н. Параллакс в CSS

Я воссоздал заголовок параллакса на веб-сайте Firewatch в CSS. Первоначально это задумывалось как глупый эксперимент, но, похоже, он провалился. Я закодировал изображения в base-64, чтобы избежать горячих ссылок на сайт Firewatch.

Автор: Сэм Бекхэм (Samdbeckham)

Ссылки: Исходный код / ​​демонстрация

Создано: 16 декабря 2014

Сделано с: HTML, SCSSS

925

Сделано с: HTML, SCSS

1212125

. Прокрутка

Страница в разрезе, разделенная параллаксной прокруткой и открывающими контейнерами. Из-за проблем с производительностью эффект смещения игнорируется в iOS.

Автор: Антуан Лали (лантуан)

Ссылки: 17. Только CSS-Parallax Scroll

Автор: Карл Даннингер (Karldanninger)

Связаники: Исходный код / ​​демонстрация

Создано: 24 ноября 2017 г.

.0009

18. Анимации CSS

Анимации CSS плюс немного JS.

Author: Anonymous (Fibonaccifreak)

Links: Source Code / Demo

Created on: June 25, 2020

Made with: HTML, CSS, JS

Tags: css-анимация, js-анимация, параллакс

19. Эффект параллакса

Автор: Мария Брисеньо (bsmaria)

Links: Source Code / Demo

Created on: July 1, 2020

Made with: HTML, CSS

Tags: parallax, parallax-effect, perspective

20.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *