Спливаюче вікно для сайту

5/55 ratings

І так, дорогі друзі як ви вже зрозуміли з назви статті, сьогодні ми будемо говорити про те як додати на сайт спливаюче вікно яке буде з'являтися відразу ж як тільки користувач відкрив ваш сайт або потрібну вам сторінку.

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

Особисто я звичайно не дуже люблю використовувати всякі там вікна даного роду, але все таки іноді без спливаючого вікна на сайті не обійтися. Так як це дуже зручна можливість піднести вашому відвідувачеві важливу на вашу думку інформацію, про якусь знижку, акцію, новину, або ж просто про щось його повідомити або попередити!

Сьогодні ми розглянемо дуже ефективний і в той же час дуже простий метод виведення спливаючого вікна на сайті, при тому що при відкритті даного popup вікна задній фон сайту буде розмитим, для того що б сконцентрувати всю увагу користувача саме на необхідної інформації яку ви вкажете в даному спливаючому вікні.

Плюс ми додамо в це вікно живу кнопку при кліці на яку користувач потрапить на підготовлену вами заздалегідь сторінку, тим самим ми додамо нашому спливаючому вікну більшої інформативності, тобто зробимо її більш красивою і зрозумілою ....

Приклад того як буде виглядати це спливаюче вікно ви можете подивитися на фото нижче:

Ну або ж ви можете подивитися живий приклад спливаючого вікна у нас на сайті:

ДЕМО ПРИКЛАД

Також ви можете скачати готові вихідні нижче.

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

І так приступимо до створення спливаючого вікна яке буде складатися з назви (заголовка вікна), і контейнера з вашим текстом а також кнопкою переходу на заздалегідь підготовлену вами сторінку, так само ми додамо ще звичайно і кнопку закриття вікна з невеликою анімацією.

Пункт перший:

Створюємо оболонку з HTML коду, в який ми помістимо елементи нашого вікна і укладемо все це в єдиний контейнер:

<div class="row pop-up">
<div class="box small-6 large-centered">
<a href="#" class="close-button">&#10006;</a>
<h3>Ласкаво просимо на сайт</h3>
<p>Тут ми пишемо короткий опис</p>
<p>Ну і звичайно ж повний текст вікна.</p>
<a href="#" class="button">Перейти сюди</a>
</div>
</div>

<h3>Ласкаво просимо на сайт</h3>

<p>Тут ми пишемо короткий опис</p>

<p>Ну і звичайно ж повний текст вікна.</p>

<a href="#" class="button">Перейти сюди</a>

</div>

Ми додали заголовок спливаючого вікна, короткий текст, повний опис, а так само живу і реалістичну кнопку переходу на потрібну нам сторінку, яка буде оживати при наведенні на неї.

Пункт другий:

В даному пункті ми додамо до спливаючого вікна CSS стилі що б сформувати правильний і гарний вигляд для вікна. Сформуємо і визначимо параметри контейнера вікна, додамо заливку кольору, і додамо стиль кнопці. Так само ми тут додамо розмиття заднього фону вікна, для того що б привернути увагу відвідувача саме до інформації розташованої у вікні, що б не відволікати на все інше.

.cover {
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
}
.blur-in {
-webkit-animation: blur 2s forwards;
-moz-animation: blur 2s forwards;
-o-animation: blur 2s forwards;
animation: blur 2s forwards;
}
.blur-out {
-webkit-animation: blur-out 2s forwards;
-moz-animation: blur-out 2s forwards;
-o-animation: blur-out 2s forwards;
animation: blur-out 2s forwards;
}
@-webkit-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@-moz-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@-o-keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@keyframes blur {
0% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
100% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
}
@-webkit-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
@-moz-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
@-o-keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
@keyframes blur-out {
0% {
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-o-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
100% {
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
}
.content {
width: 650px;
margin: 0 auto;
padding-top: 100px;
}
span {
color: dimgray;
}
.pop-up {
position: fixed;
margin: 5% auto;
left: 0;
right: 0;
z-index: 2;
}
.box {
background-color: whitesmoke;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
position: relative;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}
.button {
margin 0 auto;
background-color: #FF8566;
margin-bottom: 33px;
}
.button:hover {
background-color: #7CCF29;
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

.cover {

height: 100%;

width: 100%;

position: absolute;

z-index: 1;

}

.blur-in {

-webkit-animation: blur 2s forwards;

-moz-animation: blur 2s forwards;

-o-animation: blur 2s forwards;

animation: blur 2s forwards;

}

.blur-out {

-webkit-animation: blur-out 2s forwards;

-moz-animation: blur-out 2s forwards;

-o-animation: blur-out 2s forwards;

animation: blur-out 2s forwards;

}

@-webkit-keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

@-moz-keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

@-o-keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

@keyframes blur {

0% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

100% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

@-webkit-keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

@-moz-keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

@-o-keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

@keyframes blur-out {

0% {

-webkit-filter: blur(4px);

-moz-filter: blur(4px);

-o-filter: blur(4px);

-ms-filter: blur(4px);

filter: blur(4px);

}

100% {

-webkit-filter: blur(0px);

-moz-filter: blur(0px);

-o-filter: blur(0px);

-ms-filter: blur(0px);

filter: blur(0px);

}

.content {

width: 650px;

margin: 0 auto;

padding-top: 100px;

}

span {

color: dimgray;

}

.pop-up {

position: fixed;

margin: 5% auto;

left: 0;

right: 0;

z-index: 2;

}

.box {

background-color: whitesmoke;

text-align: center;

margin-left: auto;

margin-right: auto;

margin-top: 10%;

position: relative;

-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

}

.button {

margin 0 auto;

background-color: #FF8566;

margin-bottom: 33px;

}

.button:hover {

background-color: #7CCF29;

-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);

}

Пункт третій:

Останнім пунктом у нас буде підключення JS коду для можливості відображення вікна, а так само додамо можливість включення і відключення розмиття заднього фону.

$(function() {
$('.pop-up').hide();
$('.pop-up').fadeIn(1000);
$('.close-button').click(function (e) {
$('.pop-up').fadeOut(700);
$('#overlay').removeClass('blur-in');
$('#overlay').addClass('blur-out');
e.stopPropagation();
});
});

$(function() {

$('.pop-up').hide();

$('.pop-up').fadeIn(1000);

$('.close-button').click(function (e) {

$('.pop-up').fadeOut(700);

$('#overlay').removeClass('blur-in');

$('#overlay').addClass('blur-out');

e.stopPropagation();

});

Ну от як би і все, тепер у вас буде на сайті стильне сучасне а також адаптивне спливаюче вікно, користуйтеся на здоров'я!

Спливаюче вікно при заході на сайт.

Додаємо на сайт адаптивне спливаюче вікно при відвідуванні сайту або сторінки.

Цей контент заблокований !!!

Newspaper – сучасний новинний шаблон WordPress (5489609)

Анімоване SVG модальне вікно

Як показати поточну дату на сайті?

Стильний відео фон для сайту

Прості вкладки для сайту на CSS3

Спливаюче вікно при заході на сайт.

Додаємо на сайт адаптивне спливаюче вікно при відвідуванні сайту або сторінки.

Цей контент заблокований !!!

КОРИСНА РЕКЛАМА НА САЙТІ

Вас також може зацікавити

Немає коментарів

Залишити коментар