header

content

Менять прозрачность фона при прокрутке страницы

Менять прозрачность фона при прокрутке страницы

<div  class="opacity_bg">

</div>

<script>
    window.addEventListener('scroll', function() {
        const scrolled = window.pageYOffset;
        const background = document.querySelector('.opacity_bg');
        background.style.backgroundPositionY = -(scrolled * 0.1) + 'px';

        // Изменяем прозрачность в зависимости от прокрутки
        const maxScroll = document.body.scrollHeight - window.innerHeight;
        const opacity = 1 - (scrolled / maxScroll);
        background.style.opacity = opacity;
    });
</script>

body{background:#fff;}
.opacity_bg{height:1000vh;background:#000;}

Показать/скрыть длинный текст

js-jquery (js-jquery)

Показать/скрыть длинный текст

Текст размещен в блоке с классом ".readmore_item". Изначально блоку присвоен добавочный класс ".closed" для управления отображением через css.

".readmore_item.closed" стилями ограничен по высоте (75px), видимость ограничена по высоте.

Псевдокласс ":after" добавлен для декоративного скрытия нижней части блока с текстом градиентным фоном (от прозрачного к белому)

В скрипте при клике по элементу с классом ".readmore_button":

- ищем внутри его родительского блока текстовый блок с классом ".readmore_item". Добавляем (если нет) или удаляем (если есть) класс ".closed".

- кнопке ".readmore_button" добавляем (если нет) или удаляем (если есть) класс ".opened".

- в зависимости от наличия у ".readmore_button" класса ".opened" меняем текст на кнопке.

<div class="item">
    <div class="readmore_item closed">
        Длинный текст
    </div>
    <button class="readmore_button">
        Подробнее
    </button>
</div>

<script>
jQuery(document).ready(function($){
    $(".readmore_button").on("click", function(){
        $(this).parent().find(".readmore_item").toggleClass("closed");
        $(this).toggleClass("opened");
        if( $(this).hasClass("opened") ) { $(this).text("Скрыть"); } else { $(this).text("Подробнее"); }

    });
});
</script>

.readmore_item.closed{
position:relative;
height:75px;
overflow-y:hidden;
}

.readmore_item.closed:after{
content:'';
position:absolute;
height:60px;
bottom:0;
left:0;
right:0;
background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)
}

.readmore_item{
height:100%;
}

Анимированный счетчик

js-jquery (js-jquery)

Анимированный счетчик

Декоративный счетчик прокрутки числовых данных в заданных пределах.

Используется jquery-модуль jquery.countTo.js

Параметры:
data-from - начало отсчета
data-to - окончание отсчета
data-speed - скорость прокрутки

data-refresh-interval - интервал обновления

Блокам счетчика задать класс, указанный в настройках скрипта (.timer)

<div class="timer" data-to="444" data-speed="10000"></div>
<div class="timer" data-from="20" data-to="150" data-speed="5000" data-refresh-interval="300"></div>

<script src="jquery.countTo.js"></script>

<script type="text/javascript">
    jQuery(function ($) {
      $('.timer').each(count);
    });

      function count(options) {
        var $this = $(this);
        options = $.extend({}, options || {}, $this.data('countToOptions') || {});
        $this.countTo(options);
      }
</script>

jquery.countTo.js

Плавная прокрутка к якорю

js-jquery (js-jquery)

Плавная прокрутка к якорю

$("body").on('click', '[href*="#"]', function(e){
    var fixed_offset = 100;
    $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
    e.preventDefault();
});

Сделать картинки ссылками

js-jquery (js-jquery)

Сделать картинки ссылками

Берутся все изображения с классом "foto", размещенные внутри блока с классом "contentblock".
.contentblock ограничивает использование только вложенных в него изображений, отсеивая элементы оформления сайта и из других блоков.
.foto - класс, назначаемый фотографиям при загрузке, для фильтрации. Можно убрать из скрипта, если среди фотографий нет лишних графических элементов.

Скрипт под fancybox. Атрибут "title" фотографии используется для описания. Класс "fancy_image" добавлен для возможности визуального оформления миниатюр на странице.

jQuery(document).ready(function($){
    $(".contentblock img.foto").each(function() {
        var item_image_title = $(this).attr('title');
        $(this).wrap('<a href="' + this.src + '" data-fancybox="group" data-caption="' + item_image_title + '" class="fancy_image"></a>');
    });
});