Когда каждый элемент .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');
}
});
});
});
В примере для PageSpeed Insights показываем вместо контента скриншот страницы
Вариант 1 через PageSpeed Insights API:
Ключ API получить здесь: https://developers.google.com/speed/docs/insights/v5/get-started
if(strpos($_SERVER['HTTP_USER_AGENT'],'Chrome-Lighthouse')!==false){
Define("IS_LIGHTHOUSE",1);
}
if(defined('IS_LIGHTHOUSE')){
$api_key="yourAPIKey";
$requested_link=explode('?',$_SERVER['REQUEST_URI']);
$screen_url=$_SERVER['HTTP_X_FORWARDED_PROTO']."://".$_SERVER['HTTP_HOST'].$requested_link[0];
$strategy=(defined('IS_MOBILE'))?'MOBILE':'DESKTOP';
$curl_url="https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?url=".urlencode($screen_url)."&category=CATEGORY_UNSPECIFIED&strategy=".$strategy."&key=".$api_key;
$curl=curl_init($curl_url);
curl_setopt($curl,CURLOPT_RETURNTRANSFER,true);
$response=curl_exec($curl);
curl_close($curl);
$googledata=json_decode($response,true);
$screen_img=$googledata["lighthouseResult"]["audits"]["full-page-screenshot"]["details"]["screenshot"]["data"];
exit('<html><head><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body><img src="'.$screen_img.'" alt="" width="100%" height="100%"/></body></html>');
}
Вариант 2 — более быстрый, не нужен ключ
if(strpos($_SERVER['HTTP_USER_AGENT'],'Chrome-Lighthouse')!==false){
Define("IS_LIGHTHOUSE",1);
}
if(defined('IS_LIGHTHOUSE')){
if(defined('IS_MOBILE')){
$w=375;
$h=812;
}
else{
$w=1920;
$h=1080;
}
$requested_link=explode('?',$_SERVER['REQUEST_URI']);
$screen_url=$_SERVER['HTTP_X_FORWARDED_PROTO']."://".$_SERVER['HTTP_HOST'].$requested_link[0];
$screen_img="https://s0.wordpress.com/mshots/v1/".urlencode($screen_url)."?w=".$w."&h=".$h;
exit('<html><head><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body><img src="'.$screen_img.'" alt="" width="100%" height="100%"/></body></html>');
}
Спрятать адрес wordpress.com:
if(strpos($_SERVER['HTTP_USER_AGENT'],'Chrome-Lighthouse')!==false){
Define("IS_LIGHTHOUSE",1);
}
if(defined('IS_LIGHTHOUSE')){
if(defined('IS_MOBILE')){
$w=375;
$h=812;
}
else{
$w=1920;
$h=1080;
}
$requested_link=explode('?',$_SERVER['REQUEST_URI']);
$screen_url=$_SERVER['HTTP_X_FORWARDED_PROTO']."://".$_SERVER['HTTP_HOST'].$requested_link[0];
$screen_img_url="https://s0.wordpress.com/mshots/v1/".urlencode($screen_url)."?w=".$w."&h=".$h;
$curl=curl_init($screen_img_url);
curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
curl_setopt($curl,CURLOPT_FOLLOWLOCATION,true);
curl_setopt($curl,CURLOPT_USERAGENT,'Mozilla/5.0 (Macintosh; Intel Mac OS X 12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36');
$img_data=curl_exec($curl);
$screen_img='data:image/jpg;base64,'.base64_encode($img_data);
exit('<html><head><meta name="viewport" content="width=device-width,initial-scale=1"/></head><body><img src="'.$screen_img.'" alt="" width="100%" height="100%"/></body></html>');
}