| Kosten | Суббота, 13 Октября 2018, 16:30 | Сообщение 1 |
| Интересная структура по переключению градиента, который может полноценно заменить фон на сайте. Так как в самом верху установлены указатели, что пользователю или гостям сайта сообщает, на какой фон градиента они могут переключить, а точнее на каком фоне им будет удобно находится на сайте. Также можно применить и в других направлениях. Здесь точно сказать не могу, просто все проверил, где отлично переключается. Где идет стилистика, где веб мастер может самостоятельно выставлять те оттенки цвета, который посчитает нужным сделать.
Безусловно, что сами градиенты могут мгновенно и главное корректно улучшить внешний интернет ресурса, что идет по одному клику, с выбором гаммы или сочетание оттенка, где нужно его правильно использовать по цветовой комбинацией. Стилистика CSS также прошел долгий путь, когда дело касается применения градиента к любому элементу и его анимации.
Так выглядит один из фонов, где находятся функционал.
HTML
Код <div class="kulpodses-tedtienus-tudsam"> <canvas id="sytokadin-tosalyna"></canvas> <div class="cta-baramburge"> <a href="#navigatio-nususua" id="default-state-cta" class="active">Состояние по умолчанию</a> <a href="#quarean-avigation" id="quarean-avigation-cta">Фиолетовое состояние</a> <a href="#naropdow-nemenus" id="naropdow-nemenus-cta">Оранжевое состояние</a> </div> </div>
CSS
Код .kulpodses-tedtienus-tudsam {
position: relative;
height: 730px;
text-align: center;
margin: 0;
}
.kulpodses-tedtienus-tudsam canvas {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.kulpodses-tedtienus-tudsam .cta-baramburge {
margin-top: 0;
padding-top: 50px;
}
.kulpodses-tedtienus-tudsam .cta-baramburge a {
position: relative;
display: inline-block;
padding: 3px 7px;
border: solid 1px transparent;
margin-right: 50px;
z-index: 1;
text-decoration: none;
color: #222;
transition: border .3s;
}
.kulpodses-tedtienus-tudsam .cta-baramburge a.active {
border-color: #222;
}
JS
Код var granimInstance = new Granim({
element: '#sytokadin-tosalyna',
name: 'interactive-gradient',
elToSetClassOn: '.kulpodses-tedtienus-tudsam',
direction: 'diagonal',
opacity: [1, 1],
isPausedWhenNotInView: true,
stateTransitionSpeed: 500,
states : {
"default-state": {
gradients: [
['#B3FFAB', '#12FFF7'],
['#ADD100', '#7B920A'],
['#1A2980', '#26D0CE']
],
transitionSpeed: 10000
},
"quarean-avigation": {
gradients: [
['#9D50BB', '#6E48AA'],
['#4776E6', '#8E54E9']
],
transitionSpeed: 2000
},
"naropdow-nemenus": {
gradients: [ ['#FF4E50', '#F9D423'] ],
loop: false
}
}
});
// With jQuery
$('#default-state-cta').on('click', function(event) {
event.preventDefault();
granimInstance.changeState('default-state');
setClass('#default-state-cta')
});
$('#quarean-avigation-cta').on('click', function(event) {
event.preventDefault();
granimInstance.changeState('quarean-avigation');
setClass('#quarean-avigation-cta')
});
$('#naropdow-nemenus-cta').on('click', function(event) {
event.preventDefault();
granimInstance.changeState('naropdow-nemenus');
setClass('#naropdow-nemenus-cta')
});
function setClass(element) {
$('.kulpodses-tedtienus-tudsam a').removeClass('active');
$(element).addClass('active');
};
На этом вся установка, что можно поставить под вновь созданную страницу.
Демонстрация
| | Страна: (RU) |
| |
