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" меняем текст на кнопке.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<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>');
    });
});