ЖСО-201. Цифровые коммуникации. Практическое задание №6. Имиджевый лендинг

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

Традиционно начинаем с CSS: 

1) Вам потребуется две библиотеки, которые нужно скачать, загрузить в репозиторий и подключить перед вашим CSS:

Первая: https://raw.githubusercontent.com/Dmitrykonn/locals/main/normalize.css 

Вторая: https://raw.githubusercontent.com/Dmitrykonn/locals/main/slickmin.css

2) Указываем шрифты и размеры страницы:

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:100);

body,

html {

  height: 100%;

  background: #110101;

  font-family: 'Roboto', sans-serif;

  overflow: hidden;

}

3) Создаем класс лендинга:

.landing {

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  overflow: hidden;

}

4) Создаем производные классы для слайдера и текста поверх иллюстраций: 

.landing .slider {

  width: 100vw;

  height: 100vw;

  z-index: 2;

}

.landing .slider * {

  outline: none;

}

.landing .slider .item {

  height: 100vh;

  width: 100vw;

  position: relative;

  overflow: hidden;

  border: none;

}

.landing .slider .item .text {

  display: none;

}

.landing .slider .item img {

  min-width: 101%;

  min-height: 101%;

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

}

5) Добавляем навигационную панель с кнопками:

.landing .slick-dots {

  position: fixed;

  z-index: 100;

  width: 40px;

  height: auto;

  bottom: auto;

  top: 50%;

  right: 0;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  left: auto;

  color: #fff;

  display: block;

}

.landing .slick-dots li {

  display: block;

  width: 100%;

  height: auto;

}

6) Здесь настройте ширину и высоту навигационных кнопок (либо оставьте как в моем примере) и задайте их цвет:

.landing .slick-dots li button {

  position: relative;

  width: 22px;

  height: 22px;

  text-align: center;

  border-radius: 50%;

}

7) Это сценарий навигации по кнопкам:

.landing .slick-dots li button:before {

  content: '';

  background: #fff;

  color: #fff;

  height: 2px;

  width: 20px;

  border-radius: 0;

  position: absolute;

  top: 50%;

  right: 0;

  left: auto;

  -webkit-transform: translateY(-50%);

          transform: translateY(-50%);

  -webkit-transition: all .3s ease-in-out;

  transition: all .3s ease-in-out;

  opacity: 0.6;

}

.landing .slick-dots li.slick-active button:before {

  width: 40px;

  opacity: 1;

}

8) Теперь указываем логику разрыва в слайдере лендинга:

.landing.landing-right {

  left: 0;

  z-index: 1;

  width: 50vw;

  pointer-events: none;

}

.landing.landing-right .slider {

  left: 0;

  position: absolute;

}

9) Отображение текста: 

.landing-text {

  position: absolute;

  top: 20%;

  left: 50%;

  -webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  z-index: 100;

  font-size: 80px;

  width: 100vw;

  text-align: center;

  color: #fff;

  font-family: 'Roboto Condensed', sans-serif;

  font-weight: 100;

  pointer-events: none;

  text-transform: uppercase;

  letter-spacing: 20px;

  line-height: 0.8;

}

10) И абзацев:

.landing-p {

position: absolute;

top: 5%;

left: 30%;

-webkit-transform: translate(-50%, -50%);

          transform: translate(-50%, -50%);

  z-index: 100;

  font-size: 20px;

  width: 300vw;

  text-align: center;

  color: #fff;

  font-family: 'Roboto Condensed', sans-serif;

  font-weight: 20;

  pointer-events: none;

  text-transform: uppercase;

  letter-spacing: 10px;

  line-height: 0.8;

}

11) Это настройки адаптивного отображения лендинга. Просто скопируйте:

@media (max-width: 767px) {

  .slideshow-text {

    font-size: 40px;

  }

}

12) Добавьте классы внедряемого текста:

.the-most {

  position: fixed;

  z-index: 1;

  bottom: 0;

  left: 0;

  width: 50vw;

  max-width: 200px;

  padding: 10px;

}

.the-most p {

  max-width: 100%;

}

.includer {

position: fixed;

  z-index: 1;

  bottom: 0;

  right: 10;

  width: 50vw;

  max-width: 200px;

  padding: 10px;

}

.includer p {

  max-width: 100%;

}

13) Добавьте селектор ссылки a для отображения внизу лендинга, а также псевдокласс a:hover для отображения ссылки при наведении курсора. И для первой и для второй укажите разные цвета.

II HTML

14) Откройте теги и укажите имя вкладки:

<html lang="en">

<head>

  <meta charset="UTF-8">

<title>Название вашей вкладки</title>

15) Встройте библиотеки CSS.

16) Встройте ваш CSS. Закройте </head>

17) Внутри <body> разворачиваем классы лендинга, слайдера и отдельных фото-страниц. Разместите здесь ваши фото:

<div class="split-landing">

  <div class="landing">

    <div class="slider">

      <div class="item">

        <img src="фото1">

      </div>

      <div class="item">

        <img src="фото2">

      </div>

      <div class="item">

        <img src="фото3">

      </div>

      <div class="item">

        <img src="фото4">

      </div>

    </div>

  </div>

18) Разверните класс текста лендинга. Это последние слова каждого предложения на ваших иллюстрациях:

<div class="landing-text">

    <div class="item">Финальное слово 1</div>

    <div class="item">Финальное слово 2</div>

    <div class="item">Финальное слово 3</div>

    <div class="item">Финальное слово 4</div>

  </div>

19) Теперь добавьте класс текста. Это предложения без последнего слова, которые отображаются вверху страницы:

<div class="landing-p">

<div class="item">Предложение 1</div>

    <div class="item">Предложение 2</div>

    <div class="item">Предложение 3</div>

    <div class="item">Предложение 4</div>

</div>

</div>

20) Теперь добавляем ссылки внизу страницы: 

<p class="the-most"><a href="адрес ссылки" target="_blank">якорь ссылки</a></p>

<p class="includer"><a href="адрес ссылки" target="_blank">якорь ссылки</a></p>

JavaScript

21) Теперь необходимо добавить три библиотеки JavaScript. Взять их можно здесь:

Первая: https://raw.githubusercontent.com/Dmitrykonn/locals/main/jquery311.js

Вторая: https://raw.githubusercontent.com/Dmitrykonn/locals/main/mousewheel.js

Третья: https://raw.githubusercontent.com/Dmitrykonn/locals/main/slickmin2.js

22) И в финале нужно задать движение слайдера в JavaScript:

var $slider = $('.landing .slider'),

  maxItems = $('.item', $slider).length,

  dragging = false,

  tracking,

  rightTracking;

$sliderRight = $('.landing').clone().addClass('landing-right').appendTo($('.split-landing'));

rightItems = $('.item', $sliderRight).toArray();

reverseItems = rightItems.reverse();

$('.slider', $sliderRight).html('');

for (i = 0; i < maxItems; i++) {

  $(reverseItems[i]).appendTo($('.slider', $sliderRight));

}

$slider.addClass('landing-left');

$('.landing-left').slick({

  vertical: true,

  verticalSwiping: true,

  arrows: false,

  infinite: true,

  dots: true,

  speed: 1000,

  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'

}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {

  if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {

    $('.landing-right .slider').slick('slickGoTo', -1);

    $('.landing-text').slick('slickGoTo', maxItems);

 $('.landing-p').slick('slickGoTo', maxItems);

  } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {

    $('.landing-right .slider').slick('slickGoTo', maxItems);

    $('.landing-text').slick('slickGoTo', -1);

 $('.landing-p').slick('slickGoTo', -1);

  } else {

    $('.landing-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);

    $('.landing-text').slick('slickGoTo', nextSlide);

 $('.landing-p').slick('slickGoTo', nextSlide);

  }

}).on("mousewheel", function(event) {

  event.preventDefault();

  if (event.deltaX > 0 || event.deltaY < 0) {

    $(this).slick('slickNext');

  } else if (event.deltaX < 0 || event.deltaY > 0) {

    $(this).slick('slickPrev');

  };

}).on('mousedown touchstart', function(){

  dragging = true;

  tracking = $('.slick-track', $slider).css('transform');

  tracking = parseInt(tracking.split(',')[5]);

  rightTracking = $('.landing-right .slick-track').css('transform');

  rightTracking = parseInt(rightTracking.split(',')[5]);

}).on('mousemove touchmove', function(){

  if (dragging) {

    newTracking = $('.landing-left .slick-track').css('transform');

    newTracking = parseInt(newTracking.split(',')[5]);

    diffTracking = newTracking - tracking;

    $('.landing-right .slick-track').css({'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')'});

  }

}).on('mouseleave touchend mouseup', function(){

  dragging = false;

});

$('.landing-right .slider').slick({

  swipe: false,

  vertical: true,

  arrows: false,

  infinite: true,

  speed: 950,

  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',

  initialSlide: maxItems - 1

});

$('.landing-text').slick({

  swipe: false,

  vertical: true,

  arrows: false,

  infinite: true,

  speed: 900,

  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'

});

$('.landing-p').slick({

  swipe: false,

  vertical: true,

  arrows: false,

  infinite: true,

  speed: 900,

  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'

});

23) Сохраните JavaScript и встройте его после библиотек.

24 ) Закройте оставшиеся теги </body> и </html>

Если все верно, то ваш лендинг будет выглядеть примерно так: https://konoplevdigital.blogspot.com/p/splitterslider-import-urlhttpsfonts.html

Ссылки на выполненное в вашем блоге задание принимаются в комментариях к данному посту до 15:00 субботы, 30 марта.