Шаблон для видео-обёртки

demosourse

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

Создание структуры

HTML структура состоит из двух основных элементов: div.product-intro (заголовок, кнопки, ..) и a div.product-preview для самого изображения/видео продукта.

<div class="cd-immersive-video">
	<div class="intro-wrapper">
		<div class="product-intro">
			<div>
				<h1 class="item item-1">Immersive Video Template</h1>

				<p class="item item-2">
					<!-- product description here -->
				</p>

				<a href="#0" class="cd-btn item item-3">Download & Article</a>
			</div>
		</div> <!-- .product-intro -->

		<div class="product-preview no-transition">
			<div class="device-frame">
				<img src="assets/img/mobile-frame.svg" alt="Device Frame">
			</div>

			<div class="product-image">
				<img src="assets/img/video-fallback.jpg" alt="Product Preview">
			</div>

			<div class="product-video" data-video="assets/video/video.mp4">
				<div class="video-wrapper">
					<!-- video will be insereted here using js -->
				</div>
			</div>
		</div> <!-- .product-preview -->
	</div>

	<div class="cd-loader"></div>
</div> <!-- .cd-immersive-video -->

Само видео будет подгружаться через JavaScript.

Стили

Для устройств с небольшими экранами (< 800px): элементы div.product-intro и div.product-preview изначально скрыты ( opacity: 0 ) и появляются по ходу запуска анимации cd-item-move-up.

@keyframes cd-item-move-up {
  	0% {
    	opacity: 0;
    	transform: translateY(50px);
  	}
  	100% {
   		opacity: 1;
    	transform: translateY(0);
  	}
}

Для устройств с большими экранами сначала загрузится видео, в результате чего будет присвоен класс .video-is-loaded.

@media only screen and (min-width: 800px) {
  .cd-immersive-video .intro-wrapper {
    /* while loading the video - hide the content */
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.5s, visibility 1.5s;
  }
  .cd-immersive-video.video-is-loaded .intro-wrapper {
    /* video has been loaded - reveal content */
    visibility: visible;
    opacity: 1;
  }
}

Анимация видео: класс div.product-video расширяет видео на всю область видимости (через JavaScript). После проигрывания первой секунды, контейнер div.product-video уменьшится в размере и будет перемещён вправо. Дальнейшая анимация элемента div.product-intro будет запущена классом .animate-content:

@media only screen and (min-width: 800px) {
  .cd-immersive-video .product-intro .item {
    opacity: 0;
  }
  .cd-immersive-video .product-intro.animate-content .item {
    animation: cd-item-slide-in .4s both;
  }
  .cd-immersive-video .product-intro.animate-content .item-1 {
    animation-delay: .1s;
  }
  .cd-immersive-video .product-intro.animate-content .item-2 {
    animation-delay: .2s;
  }
  .cd-immersive-video .product-intro.animate-content .item-3 {
    animation-delay: .3s;
  }
}

Обработка событий

Для устройств с крупным дисплеем мы задействуем jQuery для загрузки видео.

Слушаем событие canplaythrough которое выстрелит после полной загрузки видео.

if( productVideo.is(':visible') ) { //productVideo = $('.product-video');
	//the video src is the data-video of productVideo
	var	video = $('<video><source src="'+productVideo.data('video')+'" type="video/mp4" />Sorry, your browser does not support HTML5 video.</video>');

	//check if the canplaythrough event occurs - video is ready to be played
	video.on('canplaythrough', function() {
		video.off('canplaythrough').trigger('readyToPlay');
	});
	// if video is in cache 'canplaythrough' won't be triggered
	if (video.get(0).readyState > 3) {
		video.off('canplaythrough').trigger('readyToPlay');
	}
}

После этого помещаем видео в HTML, прячем лоадер и запускаем анимацию блока с видео.

video.on('readyToPlay', function(){
	//video id ready to play
	video.appendTo(productVideo.find('.video-wrapper'));

	//wait for the end of an animation iteraction and reveal the video
	loader.one(animationIteration, function() {
        loader.addClass('no-animation').off(animationIteration);
		//makes sure the transition is applied (when using the scale-down class)
        //https://css-tricks.com/restart-css-animation/
        void loader.get(0).offsetWidth;
        loader.addClass('scale-down');
        loader.on(transitionEnd, function(){
        	loader.off(transitionEnd);
        	immersiveVideoWrapper.trigger('startAnimation'); //animate div.product-video
        });
    });
});

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/immersive-video-template/
Перевел: Станислав Протасевич
Урок создан: 7 Февраля 2017
Просмотров: 3625
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^