Когда каждый элемент .block
полностью показан (прокручен до конца) добавляем блоку .bullet
класс .active
$(document).ready(function(){
$(window).scroll(function(){
var scroll=parseInt($(window).scrollTop())+parseInt($(window).height());
$('.block').each(function(){
var offset=parseInt($(this).offset().top)+parseInt($(this).height());
if(scroll>offset){
$(this).find('.bullet').addClass('active');
}
});
});
});
Вместо iframe
<iframe width="640" height="360" src="https://www.youtube.com/embed/<?=$item['youtube_id']?>?autoplay=0" allowfullscreen></iframe>
отображаем div
<div class="youtube" id="<?=$item['youtube_id']?>"></div>
css:
.youtube{
background-position:center;
background-repeat:no-repeat;
position:relative;
display:inline-block;
overflow:hidden;
transition:all 200ms ease-out;
cursor:pointer;
height:360px;
}
.youtube .play{
background:url('../images/youtube-play-btn.png') no-repeat;
background-position:0 -50px;
-webkit-background-size:100% auto;
background-size:100% auto;
position:absolute;
height:50px;
width:69px;
transition:none;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
cursor:pointer;
}
.youtube:hover .play{
background-position:0 0;
}
javascript:
'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
if(!document.getElementsByClassName){
var getElementsByClassName=function(node, classname){
var a=[];
var re=new RegExp('(^| )'+classname+'( |$)');
var els=node.getElementsByTagName("*");
for(var i=0,j=els.length;i<j;i++)
if(re.test(els[i].className))a.push(els[i]);
return a;
}
var videos=getElementsByClassName(document.body,"youtube");
}
else{
var videos=document.getElementsByClassName("youtube");
}
var nb_videos=videos.length;
for (var i=0;i<nb_videos;i++){
videos[i].style.backgroundImage='url(https://i.ytimg.com/vi/'+videos[i].id+'/sddefault.jpg)';
var play=document.createElement("div");
play.setAttribute("class","play");
videos[i].appendChild(play);
videos[i].onclick=function(){
var iframe=document.createElement("iframe");
var iframe_url="https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1";
if(this.getAttribute("data-params"))iframe_url+='&'+this.getAttribute("data-params");
iframe.setAttribute("src",iframe_url);
iframe.setAttribute("frameborder",'0');
iframe.style.width=this.style.width;
iframe.style.height=this.style.height;
this.parentNode.replaceChild(iframe,this);
}
}
});
Картинка: youtube-play-btn.zip
На основе: https://sitehere.ru/uskorit-zagruzku-stranic-sajta
В примере по клику на i
в блоке .link
скопировать ссылку внутри этого блока
function copyToClipboard(textToCopy){
if(navigator.clipboard&&window.isSecureContext){
return navigator.clipboard.writeText(textToCopy);
}
else{
let textArea=document.createElement("textarea");
textArea.value=textToCopy;
textArea.style.position="fixed";
textArea.style.left="-999999px";
textArea.style.top="-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res,rej)=>{
document.execCommand('copy')?res():rej();
textArea.remove();
});
}
}
$(document).ready(function(){
$('.link i').on('click',function(){
var link=$(this).closest('.link').find('a').attr('href');
copyToClipboard(link).then(()=>console.log('copied')).catch(()=>console.log('not copied'));
});
});
javascript:
function canUseWebp(){
let elem=document.createElement('canvas');
if(!!(elem.getContext&&elem.getContext('2d'))){
return elem.toDataURL('image/webp').indexOf('data:image/webp')==0;
}
return false;
}
window.onload=function(){
let images=document.querySelectorAll('[data-bg]');
for(let i=0;i<images.length;i++){
let image=images[i].getAttribute('data-bg');
images[i].style.backgroundImage='url('+image+')';
}
let isitFirefox=window.navigator.userAgent.match(/Firefox\/([0-9]+)\./);
let firefoxVer=isitFirefox?parseInt(isitFirefox[1]):0;
if(canUseWebp()||firefoxVer>=65){
let imagesWebp=document.querySelectorAll('[data-bg-webp]');
for(let i=0;i<imagesWebp.length;i++){
let imageWebp=imagesWebp[i].getAttribute('data-bg-webp');
imagesWebp[i].style.backgroundImage='url('+imageWebp+')';
}
}
};
html:
<div class="item" style="background-image:url('/img/banners/banner2.webp');" data-bg="/img/banners/banner2.jpg" data-bg-webp="/img/banners/banner2.webp"></div>
пример программного вывода:
function attr_background_image($image,$dir,$add=''){
$html='';
$image_path=ROOT_HTTP.$dir.$image;
$image_pathinfo=pathinfo($image_path);
$ext=($image_pathinfo['extension']=='jpg')?'jpeg':$image_pathinfo['extension'];
if(USE_WEBP==1&&$ext!='svg'&&file_exists(ROOT_DIR.$dir.$image_pathinfo['filename'].'.webp')){
$html.=' style="background-image:url(\''.ROOT_HTTP.$dir.$image_pathinfo['filename'].'.webp\');" data-bg="'.ROOT_HTTP.$dir.$image.'" data-bg-webp="'.ROOT_HTTP.$dir.$image_pathinfo['filename'].'.webp"';
}
else{
$html.=' style="background-image:url(\''.ROOT_HTTP.$dir.$image.'\');'.$add.'"';
}
return $html;
}
$block_bg='';
if($block['photo']||$block['bgcolor']){
if($block['photo']){
$bgcolor='';
if($block['bgcolor']){
$bgcolor.='background-color:'.$block['bgcolor'].';';
}
$block_bg=attr_background_image($block["photo"],IMAGES_BLOCKS_DIR,$bgcolor);
}
elseif($block['bgcolor']){
$block_bg.=' style="';
$block_bg.='background-color:'.$block['bgcolor'].';';
$block_bg.='"';
}
}
или
<div class="item"<?=attr_background_image($item["photo"],IMAGES_BANNERS_DIR)?>>
https://webinmind.ru/javascript/webp-to-background-image