Качественное оформление проектов — сортировка информации
Разбиваем страницу на проекты, каждый из которых имеет собственное оформление.
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<header> <a href="#0" class="cd-logo"><img src="img/cd-logo.svg"></a> <button class="cd-nav-trigger">Menu<span aria-hidden="true" class="cd-icon"></span></button> </header> <nav class="cd-primary-nav"> <ul> <li class="cd-label">Navigation</li> <li><a href="#0">The team</a></li> <!-- other navigation items here --> </ul> </nav> <!-- .cd-primary-nav --> <div class="cd-projects-container"> <ul> <li class="single-project"> <div class="cd-title"> <h2>Project 1</h2> </div> <!-- .cd-title --> <div class="cd-project-info"> <button class="cd-scroll">Scroll down</button> <div class="content-wrapper"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam molestias suscipit mollitia vitae ea non ex, dignissimos aperiam minus magni totam sint culpa vel voluptate ipsa sunt repellendus. Ab, magni! </p> <!-- additional project info here --> </div> </div> <!-- .cd-project-info --> </li> <!-- other projects here --> </ul> </div> <!-- .cd-projects-container --> |
2. Теперь добавим стили CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
.cd-projects-container { height: 100%; position: relative; overflow: hidden; } .cd-projects-container .single-project { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; transition: transform 0.4s; } .cd-projects-container .single-project:nth-of-type(2) { transform: translateY(33.3333333333%); } .cd-projects-container .single-project:nth-of-type(3) { transform: translateY(66.6666666667%); } .cd-title { height: 33.3333333333%; } .cd-title::before { /* background image */ content: ''; position: absolute; top: 0; left: 0; height: 300%; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; } .single-project:nth-of-type(1) .cd-title::before { background-image: url(../img/img-1.jpg); } .cd-projects-container .single-project.selected { /* selected project */ transform: translateY(0); } .cd-projects-container .single-project.selected ~ li { /* hide siblings projects */ transform: translateY(100%); } .cd-project-info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; } .cd-project-info::before { /* use to push the .content-wrapper below the intro project image */ content: ''; display: block; height: 100%; width: 100%; pointer-events: none; } .cd-project-info .content-wrapper { position: relative; z-index: 2; padding: 2em 0 3em; background-color: #FFFFFF; } .selected .cd-project-info { opacity: 1; visibility: visible; transition: opacity 0s, visibility 0s; } .cd-primary-nav { position: absolute; top: 0; left: 0; /* height = (100% - 9%) - 9% is the space taken by the projects when the navigation is open */ height: 91%; width: 100%; overflow: auto; opacity: 0; } .cd-primary-nav ul { transform: translateY(50px); transition: transform 0.4s; } .cd-primary-nav.nav-open { opacity: 1; } .cd-primary-nav.nav-open ul { transform: translateY(0); } .cd-projects-container.nav-open .single-project { box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); transform: translateY(91%); } .cd-projects-container.nav-open .single-project:nth-of-type(2) { transform: translateY(94%); } .cd-projects-container.nav-open .single-project:nth-of-type(3) { transform: translateY(97%); } |
И вот то, что мы примерно имеем (Принцип работы скрипта):
3. Подключаем javascript и jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script src="js/jquery-2.1.4.js"></script> <script src="js/main.js"></script> <!-- Resource jQuery --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-48014931-1', 'codyhouse.co'); ga('send', 'pageview'); jQuery(document).ready(function($){ $('.close-carbon-adv').on('click', function(event){ event.preventDefault(); $('#carbonads-container').hide(); }); }); </script> |
Готово.
Детали скрипта находятся в исходниках урока.
