• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Установка фона и градиента на сайт с выбором (Как установить фоновые изображения и градиент CSS3)
Установка фона и градиента на сайт с выбором
Kosten
Дата: Суббота, 2018-10-13, 16:30 | Сообщение 1
Администраторы
Сообщений:18467
Награды: 55


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

Безусловно, что сами градиенты могут мгновенно и главное корректно улучшить внешний интернет ресурса, что идет по одному клику, с выбором гаммы или сочетание оттенка, где нужно его правильно использовать по цветовой комбинацией. Стилистика 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');
};

На этом вся установка, что можно поставить под вновь созданную страницу.

Демонстрация
Прикрепления: 1219828.png(28.9 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Установка фона и градиента на сайт с выбором (Как установить фоновые изображения и градиент CSS3)
  • Страница 1 из 1
  • 1
Поиск: