Игра Престолов. Верстаем макет по сериалу | Блог веб-разработчика MaxGraph

Игра Престолов. Верстаем макет по сериалу

Привет! Сегодня необычный выпуск, который возможно станет новой рубрикой (впоследствии обязательно видео-рубрикой). Мы верстаем макет, посвященный Игре Престолов.

Игра Престолов — самый популярный сериал в истории. Я очень люблю его, а поэтому решил сверстать небольшой макет на его тему. За макет огромное спасибо Анне, вышло круто)

Собственно, пишите если эта рубрика будет интересна, в будущем будет на видео (ну и конечно с полным процессом, что понятное дело, интереснее). Сегодня же — код)

Обращаю внимание — я использую спец. сборку и верстаю так, как верстал бы реальный макет, со всеми технологиями. Так что можете смотреть)

PUG

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.first__screen
  include header
  .container
    .first__screen-heading
      img(src="/images/main-logo.png" alt="")
    .first__screen-date
      | 14 April 2019
    .first__screen-buttons
      a.first__screen-tickets(href="#")
        | Get Ticket
      a.first__screen-play(href="#")
        | watch trailer
    .first__screen-descr
      | John Snow, Sansa and Arya walk along the Starck crypt. Along the walls are statues of various characters
      | in the series. When heroes pass by them, phrases
      | are heard, somehow related to the past.
    .first__screen-arrow
      +svg("arrow")
.first__screen
  include header
  .container
    .first__screen-heading
      img(src="/images/main-logo.png" alt="")
    .first__screen-date
      | 14 April 2019
    .first__screen-buttons
      a.first__screen-tickets(href="#")
        | Get Ticket
      a.first__screen-play(href="#")
        | watch trailer
    .first__screen-descr
      | John Snow, Sansa and Arya walk along the Starck crypt. Along the walls are statues of various characters
      | in the series. When heroes pass by them, phrases
      | are heard, somehow related to the past.
    .first__screen-arrow
      +svg("arrow")

Комментировать тут конечно особо нечего — это код первого экрана на pug. Вообще макет я разделил на три компонента — first-screen, header и social.

SCSS

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
.first__screen {
    position: relative;
    padding-top: vw(170);
    height: vw(1080);
    background-image: url("../images/bg.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
 
    &-heading {
        margin: 0 auto;
        width: vw(1589);
        height: vw(214);
 
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
 
    &-date {
        margin-top: vw(88);
        width: 100%;
        font-family: $font-family-reg;
        font-size: vw(30);
        color: $color-white;
    }
 
    &-buttons {
        display: flex;
        align-items: center;
        margin-top: vw(57);
        width: 100%;
    }
 
    &-tickets {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid $color-white;
        width: vw(300);
        height: vw(60);
        font-family: $font-family-reg;
        font-size: vw(20);
        text-transform: uppercase;
        color: $color-white;
        transition: all 0.15s;
 
        &:hover {
            color: $color-black;
            background-color: $color-white;
            transition: all 0.15s;
        }
    }
 
    &-play {
        display: inline-block;
        margin-left: vw(54);
        padding: vw(5) vw(46);
        padding-right: 0;
        font-family: $font-family-reg;
        font-size: vw(20);
        text-transform: uppercase;
        color: $color-white;
        background-image: url("../images/play.png");
        background-position: left center;
        background-size: vw(26) vw(26);
        background-repeat: no-repeat;
    }
 
    &-descr {
        margin-top: vw(140);
        max-width: vw(320);
        font-family: $font-family-reg;
        font-size: vw(13);
        line-height: vw(30);
        color: $color-white;
    }
 
    &-arrow {
        margin-top: vw(60);
        width: 100%;
 
        svg {
            display: block;
            width: vw(81);
            height: vw(10);
        }
    }
}
.first__screen {
	position: relative;
	padding-top: vw(170);
	height: vw(1080);
	background-image: url("../images/bg.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

	&-heading {
		margin: 0 auto;
		width: vw(1589);
		height: vw(214);

		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	&-date {
		margin-top: vw(88);
		width: 100%;
		font-family: $font-family-reg;
		font-size: vw(30);
		color: $color-white;
	}

	&-buttons {
		display: flex;
		align-items: center;
		margin-top: vw(57);
		width: 100%;
	}

	&-tickets {
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid $color-white;
		width: vw(300);
		height: vw(60);
		font-family: $font-family-reg;
		font-size: vw(20);
		text-transform: uppercase;
		color: $color-white;
		transition: all 0.15s;

		&:hover {
			color: $color-black;
			background-color: $color-white;
			transition: all 0.15s;
		}
	}

	&-play {
		display: inline-block;
		margin-left: vw(54);
		padding: vw(5) vw(46);
		padding-right: 0;
		font-family: $font-family-reg;
		font-size: vw(20);
		text-transform: uppercase;
		color: $color-white;
		background-image: url("../images/play.png");
		background-position: left center;
		background-size: vw(26) vw(26);
		background-repeat: no-repeat;
	}

	&-descr {
		margin-top: vw(140);
		max-width: vw(320);
		font-family: $font-family-reg;
		font-size: vw(13);
		line-height: vw(30);
		color: $color-white;
	}

	&-arrow {
		margin-top: vw(60);
		width: 100%;

		svg {
			display: block;
			width: vw(81);
			height: vw(10);
		}
	}
}

Здесь код, написанный на scss. В принципе, ничего серьезного. Дальше интереснее:)

JS

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
import vars from '../vars';
 
if (vars.$window.width() >= 1025) {
    function showMain() {
        return new Promise((resolve) => {
            new TimelineMax({
                onStart() {
                    window.scrollTo(0, 0);
                    vars.$siteContainer.removeClass('is-outer');
                },
                onComplete: resolve,
            })
                .from(vars.$siteContainer, 0.7, {
                    autoAlpha: 0,
                    clearProps: 'all',
                })
                .from(vars.$header, 0.5, {
                    autoAlpha: 0,
                    y: -50,
                    clearProps: 'all',
                })
                .from(vars.$heading, 0.5, {
                    autoAlpha: 0,
                    y: 50,
                    clearProps: 'all',
                })
                .from(vars.$date, 0.5, {
                    autoAlpha: 0,
                    x: -50,
                    clearProps: 'all',
                })
                .from(vars.$buttons, 0.5, {
                    autoAlpha: 0,
                    x: -50,
                    clearProps: 'all',
                })
                .from(vars.$descr, 0.5, {
                    autoAlpha: 0,
                    x: -50,
                    clearProps: 'all',
                })
                .from(vars.$arrow, 0.5, {
                    autoAlpha: 0,
                    x: -50,
                    clearProps: 'all',
                });
        });
    }
 
    showMain();
}
import vars from '../vars';

if (vars.$window.width() >= 1025) {
	function showMain() {
		return new Promise((resolve) => {
			new TimelineMax({
				onStart() {
					window.scrollTo(0, 0);
					vars.$siteContainer.removeClass('is-outer');
				},
				onComplete: resolve,
			})
				.from(vars.$siteContainer, 0.7, {
					autoAlpha: 0,
					clearProps: 'all',
				})
				.from(vars.$header, 0.5, {
					autoAlpha: 0,
					y: -50,
					clearProps: 'all',
				})
				.from(vars.$heading, 0.5, {
					autoAlpha: 0,
					y: 50,
					clearProps: 'all',
				})
				.from(vars.$date, 0.5, {
					autoAlpha: 0,
					x: -50,
					clearProps: 'all',
				})
				.from(vars.$buttons, 0.5, {
					autoAlpha: 0,
					x: -50,
					clearProps: 'all',
				})
				.from(vars.$descr, 0.5, {
					autoAlpha: 0,
					x: -50,
					clearProps: 'all',
				})
				.from(vars.$arrow, 0.5, {
					autoAlpha: 0,
					x: -50,
					clearProps: 'all',
				});
		});
	}

	showMain();
}

Вот тут самое интересное. По факту, js на странице нет, зато есть стартовая анимация. И мы здесь используем gsap. Создаем функцию showMain и с помощью TweenMax делаем последовательные анимации.

Ссылки

Не стал это заливать на codepen, зато залил на:

Свой хостинг: http://got.maxgraph.ru/

Github: https://github.com/maxdenaro/gameofthrones-concept

 

Понимаю, что в текстовом формате не так интересно, но этот пост еще и служит как вопрос — а нужна ли такая рубрика? Просто берем какие-то макеты (на тематику фильмов, сериалов, комиксов, игр) и верстаем. Конечно, на видео.

 

Пишите свои отзывы)

Метки: , , , ,

Понравилось? Оцени!
12345 (2 оценок, среднее: 5,00 из 5)
Загрузка...

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

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