Главная » Языки программирования

Эффект смены страниц css

На чтение 1 мин
Содержание
  1. Русские Блоги
  2. css3 несколько общих эффектов перелистывания страниц
  3. Спрятаться за
  4. Показывать разный контент с обеих сторон
  5. 24 CSS Page Transitions
  6. Author
  7. Links
  8. Made with
  9. About a code
  10. transform: translate
  11. Author
  12. Links
  13. Made with
  14. About a code
  15. Just another CSS UI
  16. Author
  17. Links
  18. Made with
  19. About the code
  20. Multi Layer Page Reveal Effect
  21. Author
  22. Links
  23. Made with
  24. About the code
  25. Tiles Page Transition
  26. Author
  27. Links
  28. Made with
  29. About the code
  30. Article Transition Page
  31. Author
  32. Links
  33. Made with
  34. About the code
  35. Page Transition
  36. Fullscreen Layout Page Transitions
  37. React Animated Page Transitions
  38. Author
  39. Links
  40. Made with
  41. About the code
  42. Reveal Content Animation
  43. Transitions
  44. Expanding Card Page Transition Effect
  45. Cubic Bezier Page Transition
  46. Author
  47. Links
  48. Made with
  49. About a code
  50. Page Transitions
  51. Author
  52. Links
  53. Made with
  54. About the code
  55. Simple CSS3 Page Transition
  56. Vue2 Page Transitions With GSAP
  57. Author
  58. Links
  59. Made with
  60. About the code
  61. Page Transition
  62. Author
  63. Links
  64. Made with
  65. About a code
  66. Splash Page
  67. Easy CSS Page/Slide Transitions
  68. Page Transition With Loader
  69. Page Transitions
  70. Page Transition Loader
  71. SVG Path Pagination And Rotating Page Transition
  72. Material Design Transition
  73. Kontext
  74. Плавный переход между страницами
  75. CSS для эффекта растворения страниц
  76. Плавное появление содержимого с помощью Jquery
  77. Создаем переходы для страниц при помощи CSS3
  78. HTML-разметка
  79. CSS

Русские Блоги

css3 несколько общих эффектов перелистывания страниц

Эффекты перелистывания страниц

 
 
 
 
 
 
 
Вторая страница 
 
 
 
 
Первая страница 
 
  
 
 
Обложка 
 
 

.book < height: 10rem; width: 40%; background: #FFF; position: absolute; right:10%; top:4rem; transform: rotateX(30deg); -webkit-transform: rotateX(30deg); -ms-transform: rotateX(30deg); -o-transform: rotateX(30deg); >/ * Общий стиль на странице * / .book-page < position: absolute; top: 0; left: 0; width: 100%; height:10rem; border: 1px solid #1976D2; text-align: center; background-color: #fff; >.book-page p < font-size: 1.2rem; margin-top: 2rem; color: #ff6300; backface-visibility:hidden; -webkit-backface-visibility:hidden; >/ * Домашний стиль * / .first-page < background-color: #1976D2; >/ * Раздел анимации * / / * Я главная страница анимации * / .flip-animation-start < animation: flipBook1 3s forwards; -moz-animation: flipBook1 3s forwards; /* Firefox */ -webkit-animation: flipBook1 3s forwards; /* Safari and Chrome */ -o-animation: flipBook1 3s forwards; /* Opera */ >.flip-animation-end < animation: flipBook2 3s forwards; -moz-animation: flipBook2 3s forwards; /* Firefox */ -webkit-animation: flipBook2 3s forwards; /* Safari and Chrome */ -o-animation: flipBook2 3s forwards; /* Opera */ >@keyframes flipBook1 < 0% < -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); >100% < -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); >> / * Закрыть страницы книги * / @keyframes flipBook2 < 0% < -webkit-transform: rotateY(-160deg); -ms-transform: rotateY(-160deg); -o-transform: rotateY(-160deg); transform: rotateY(-160deg); >100% < -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); >>
$('.now_page').click(function()< if($(this).hasClass('flip-animation-start'))< $(this).removeClass('flip-animation-start').addClass('flip-animation-end'); >else < $(this).removeClass('flip-animation-end').addClass('flip-animation-start'); >>)

Эффект перелистывания страниц, написанный таким образом, можно увидеть как на передней, так и на задней сторонах. Если вы хотите скрыть обратную сторону, вам нужно использовать свойство css3: backface-visibility: hidden; это свойство может быть скрыто на обратной стороне элемента.

Спрятаться за

Добавьте свойство backface-visibility. Примечание: Это свойство должно вступить в силу с собственным свойством родителя transform-style: preserve-3d. Его можно добавить ко всем родителям, если это необходимо.

Показывать разный контент с обеих сторон

Если вы хотите отображать разное содержимое на передней и задней части одной и той же страницы, вы можете гибко применить свойство backface-visibility предыдущей страницы. Таким образом, содержимое на оборотной стороне сначала переворачивается, так что содержимое на оборотной стороне скрыто спереди и отображается сзади.

/ * Обратный * / .back_book_page .back_book_page>p

Источник

24 CSS Page Transitions

Collection of hand-picked free HTML and CSS page transition effect code examples from Codepen, GitHub and other resources. Update of February 2020 collection. 2 new items.

Author

Made with

About a code

transform: translate

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Just another CSS UI

Just another CSS UI with page transition.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Multi Layer Page Reveal Effect

Multi layer page reveal effect in HTML, CSS and JavaScript.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About the code

Tiles Page Transition

Tiles page transition in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Article Transition Page

Article transition page in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Page Transition

Demo Image: Fullscreen Layout Page Transitions

Fullscreen Layout Page Transitions

Page transitions with HTML, CSS and JavaScript.
Made by Marcelo Ribeiro
June 19, 2017

Demo Image: React Animated Page Transitions

React Animated Page Transitions

Just a small demo to show a few page transitions in React. Using GreenSock and SVG.
Made by Sarah Drasner
May 1, 2017

Author

Made with

About the code

Reveal Content Animation

Reveal content animation and menu.

Demo Image: Transitions

Transitions

Easy css page transitions.
Made by Filipp
March 3, 2017

Demo Image: Expanding Card Page Transition Effect

Expanding Card Page Transition Effect

That thing where the card expands into the background, no libraries, commented. Please note: this code is in no way ready to be used as is in production on your website. It will need to be adapted to be cross browser compliant & accessible.
Made by Rachel Smith
February 10, 2017

Demo Image: Cubic Bezier Page Transition

Cubic Bezier Page Transition

GSAP Cubic bezier page transition.
Made by Maciej Siwanowicz
February 2, 2017

Author

Made with

About a code

Page Transitions

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Simple CSS3 Page Transition

Author

Made with

About the code

Simple CSS3 Page Transition

A simple and performant CSS3 page transition.

Demo Image: Vue2 Page Transitions With GSAP

Vue2 Page Transitions With GSAP

Some default Vue2 page transitions.
Made by Tim Rijkse
November 4, 2016

Demo image: Page Transition

Author

Made with

About the code

Page Transition

Seamless transition from thumbnail grid to fullscreen page. Using CSS animations and Angular 1.5.

Author

Made with

About a code

Splash Page

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo Image: Easy CSS Page/Slide Transitions

Easy CSS Page/Slide Transitions

Super easy slider/page transitions.
Made by Jamie Coulter
December 31, 2015

Demo Image: Page Transition With Loader

Page Transition With Loader

Page transition with loader in HTML, CSS and JavaScript.
Made by John Heiner
June 12, 2015

Demo Image: Page Transitions

Page Transitions

Page transitions with HTML, CSS and JavaScript.
Made by Romswell Roswell Parian Paucar
May 22, 2015

Demo Image: Page Transition Loader

Page Transition Loader

New page preloader concept. SVG circle loader with morphing effect. Responsive animated wireframe.
Made by Arsen Zbidniakov
April 17, 2015

Demo Image: SVG Path Pagination And Rotating Page Transition

SVG Path Pagination And Rotating Page Transition

Have a lot of hardcoded numbers. Under any circumstances don’t look into js section.
Made by Nikolay Talanov
February 3, 2015

Demo Image: Material Design Transition

Material Design Transition

Click any link in this block of text to load another set of text. The links don’t go anywhere yet. They are just hooks to allow you to click somewhere.

The style and animation is entirely CSS so it is smooth. JavaScript is used to add classes at the right time. It also pauses to wait for the content to be replaced, and calculates where to centre the hole. There are two stages to the animation. When a link is clicked the border-width grows very large.
Made by David Marland
October 20, 2014

Demo Image: Kontext

Kontext

A context-shift transition inspired by iOS.
Made by Hakim El Hattab
February 26, 2013

Источник

Плавный переход между страницами

Вы наверное замечали что часто на сайтах при переходе со страницы на страницу мельком можно уловить момент, когда содержимое в виде изображений и текстур еще не успело загрузиться. В такие моменты «построения», сайт может выглядеть крайне не презентабельно особенно у людей с низкой пропускной способностью интернета.

Больше всего это заметно при первой загрузке страницы, когда еще текстуры фона и изображения еще не кэшируются браузером посетителя. Чтобы «сгладить углы» Pedanto рекомендует использовать простой метод, который подойдет для владельца любого сайта. Он позволит реализовать плавный переход между страницами и плавную загрузку новых страниц.

CSS для эффекта растворения страниц

Первым делом нам понадобиться скрыть HTML тег body используя CSS стиль opacity. Это позволит сделать невидимым весь контент вашего сайта, для последующего плавного его появления при переходе со страницы на страницу. Параметр transition задаст скорость изменения стиля, при его смене. В нашем случае страница станет видимой через пол секунды.

Важный момент: Если фон вашего сайта не белого цвета, то данный стиль лучше использовать на блоке внутри основного фона сайта, чтобы при смене страницы всегда оставался базовый цвет основного фона.

Плавное появление содержимого с помощью Jquery

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

Для этого перед закрывающим тегом следует разместить следующий код:

Как только страница будет сформирована, наш код изменит opacity тега сделав его видимым, а transition предаст плавности. Вот и все. Таким образом можно легко реализовать плавный переход между страницами сайта, и скрыть дефекты подгрузки страницы.

Посмотреть пример работы этого скрипта, можно просто перейдя на любую страницу нашего сайта.

Источник

Создаем переходы для страниц при помощи CSS3

Я уверен, что вы часто видели на различных веб-сайтах необычные эффекты при переходе между страницами, большинство из них создавалось с помощью JavaScript. В этом уроке я покажу, как вы можете создать свой собственный эфект перехода, но вместо JavaScript я буду использовать CSS Transition и свойство :target.

HTML-разметка

HTML будет состоять из пяти основных секций: заголовок и содержание четырех разделов. Каждый из разделов содержания будет иметь свой ID и класс panel. Кроме того, мы добавим еще один раздел, который будет внутри основных четырех разделов, и будет иметь класс content. Первая секция с ID #home будет иметь только класс content, и не будет содержать дополнительный блок внутри:

  
Home
 
Some content
   
 
Portfolio
 
Some content
 
   
 
About
 
Some content
 
   
 
Contact
 
Some content

В секции #header у нас будет основной заголовок и навигация:

Теперь, основная идея заключается в использовании псевдо-класса :target для того, чтобы добавить переход на текущий раздел. В этом примере мы будем «перелистывать» наши страницы сначала вверх, а затем вниз (см. первый демо-пример).

CSS

Первым делом мы зададим стили нашему заголовку и навигации. Мы хотим, чтобы они были на одном и том же месте, в любое время, даже если всё остальное будет двигаться.

#header < position: absolute; z-index: 2000; width: 235px; top: 50px; >#header h1 < font-size: 30px; font-weight: 400; text-transform: uppercase; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); padding: 20px; background: #000; >#navigation < margin-top: 20px; width: 235px; display:block; list-style:none; z-index:3; >#navigation a < color: #444; display: block; background: #fff; background: rgba(255,255,255,0.9); line-height: 50px; padding: 0px 20px; text-transform: uppercase; margin-bottom: 6px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); font-size: 14px; >#navigation a:hover

Все разделы, кроме #home, имеют класс panel. Здесь мы будем использовать переход всякий раз, когда элемент c этим классом вызывается в меню. Трюк заключается в использовании отрицательного отступа в классе panel в «обычном» состоянии и отсутствии этого отступа у этого класса при использовании псевдо-класса :target. Переход создает эффект выезда страницы сверху:

Далее зададим стили для класса content, который есть во всех наших секциях:

.content < right: 40px; left: 280px; top: 0px; position: absolute; padding-bottom: 30px; >.content h2 < font-size: 110px; padding: 10px 0px 20px 0px; margin-top: 52px; color: #fff; color: rgba(255,255,255,0.9); text-shadow: 0px 1px 1px rgba(0,0,0,0.3); >.content p

Для того чтобы изменить цвет текущего элемента в навигации, мы будем использовать псевдо-класс :target с обобщенным родственным комбинатором (the general sibling selector), чтобы «найти» соответствующий пункт навигации:

#home:target ~ #header #navigation #link-home, #portfolio:target ~ #header #navigation #link-portfolio, #about:target ~ #header #navigation #link-about, #contact:target ~ #header #navigation #link-contact

Вот и все, что вам нужно. Посмотрите демо-примеры, чтобы увидеть, что у нас получилось.
Демо>
Источник

Источник

Читайте также:  Команды консоли css прицел
Оцените статью
© 2023 Программирование