Question about this BBC news site, what is the format type called

Hello, I like the layout of this BBC article, I have seen it used on various BBC magazine articles but can someone tell me what such a format is called (the changing images as you scroll down are a feature I particularity like, some stay static while others scroll).

Now the real question, is there a wordpress theme that has such a feature?

http://www.bbc.co.uk/news/resources/idt-sh/premier_league_25_2002_2007

Thanks

Looks like a lot of java script. Not sure what browser you are using but if its Chrome then right-click on the page and then view source. That way you will be able to see the code, copy or print it out. As for wordpress, I doubt you will get something this complex.

Most good browsers like Firefox and Opera have some form of 'Inspect Web Element' which would give you some idea of the code being used for each piece:

.p_padlock:focus,.p_padlock:hover,.focusEnabled .p_padlock_unlocked:focus,.p_padlock_unlocked:hover{background-color:#ff4739;}.p_paragraph,.p_playerControlBarHolder{-webkit-text-size-adjust:none;}@-moz-document url-prefix(){.p_audioIcon,.p_muteIcon,.p_fullscreen-enterIcon{position:absolute;top:0;width:44px;height:44px;}.p_audioIcon{left:1px;}.p_muteIcon{left:1px;}.p_fullscreen-enterIcon{left:0;top:0;}.svg .p_cta .p_ctaIcon{left:9px;}.svg .p_padlock .p_padlock-lockedIcon{width:30px;height:30px;}.svg .p_padlock .p_padlock-unlockedIcon{width:30px;height:30px;}.p_play-iplayerIcon{width:44px;height:44px;top:2px;}.p_closed-captionsIcon{width:44px;height:44px;top:-1px;}.minimode.svg .p_cta .p_ctaIcon{left:9px;}.svg .p_embedButton .p_embedIcon{left:2px;top:2px;}}.p_warning.p_guidance.p_continous .p_guidanceIcon,.p_ctaGuidance.p_guidance.p_warningCta .p_guidanceIcon{fill:#FFFFFF;color:black;}.p_warning.p_guidance.p_continous{background-color:rgba(51,51,51,0.85);}.p_warning.p_guidance.p_continous .guidanceClose{background-color:#404040;}.p_warning .p_guidanceFallback,.p_warningCta .p_guidanceFallback{background-color:#FFFFFF;color:black;}@media only screen and (orientation:portrait) and (height:628px) and (-webkit-device-pixel-ratio:2) and (-webkit-min-device-pixel-ratio:2),only screen and (orientation:portrait) and (height:696px),only screen and (orientation:portrait) and (height:528px){.fullscreen.ios10 .p_playerControls{padding-bottom:65px;}.fullscreen.ios10 .p_timeTip{bottom:153px;}}@media (max-width:365px){:not(.nofullscreen).chromecast.subtitles.embed .p_timeDisplay,:not(.nofullscreen).picInPic.subtitles.embed .p_timeDisplay{visibility:hidden;}}@media (max-width:264px){:not(.nofullscreen).chromecast.subtitles.embed .p_embedButton,:not(.nofullscreen).picInPic.subtitles.embed .p_embedButton{visibility:hidden;}}@media (max-width:220px){:not(.nofullscreen).chromecast.subtitles.embed .p_chromecastButton,:not(.nofullscreen).picInPic.subtitles.embed .p_picInPicButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).chromecast.subtitles.embed .p_subtitleButton,:not(.nofullscreen).picInPic.subtitles.embed .p_subtitleButton{visibility:hidden;}}@media (max-width:323px){:not(.nofullscreen).chromecast.embed .p_timeDisplay,:not(.nofullscreen).picInPic.embed .p_timeDisplay,:not(.nofullscreen).subtitles.embed .p_timeDisplay,:not(.nofullscreen).subtitles.chromecast .p_timeDisplay,:not(.nofullscreen).subtitles.picInPic .p_timeDisplay{visibility:hidden;}}@media (max-width:220px){:not(.nofullscreen).picInPic.embed .p_embedButton,:not(.nofullscreen).chromecast.embed .p_embedButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).picInPic.embed .p_picInPicButton,:not(.nofullscreen).chromecast.embed .p_chromecastButton{visibility:hidden;}}@media (max-width:220px){:not(.nofullscreen).subtitles.embed .p_embedButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).subtitles.embed .p_subtitleButton{visibility:hidden;}}@media (max-width:220px){:not(.nofullscreen).subtitles.chromecast .p_chromecastButton,:not(.nofullscreen).subtitles.picInpic .p_picInPicButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).subtitles.chromecast .p_subtitleButton,:not(.nofullscreen).subtitles.picInPic .p_subtitleButton{visibility:hidden;}}@media (max-width:277px){:not(.nofullscreen).embed .p_timeDisplay,:not(.nofullscreen).subtitles .p_timeDisplay,:not(.nofullscreen).chromecast .p_timeDisplay,:not(.nofullscreen).picInPic .p_timeDisplay{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen) .p_embedButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).subtitles .p_subtitleButton{visibility:hidden;}}@media (max-width:176px){:not(.nofullscreen).chromecast .p_chromecastButton,:not(.nofullscreen).picInpic .p_picInPicButton{visibility:hidden;}}@media (max-width:232px){:not(.nofullscreen) .p_timeDisplay{visibility:hidden;}}@media (max-width:320px){.nofullscreen.chromecast.embed.subtitles .p_timeDisplay,.nofullscreen.picInPic.embed.subtitles .p_timeDisplay{visibility:hidden;}}@media (max-width:220px){.nofullscreen.chromecast.subtitles .p_embedButton,.nofullscreen.picInPic.subtitles .p_embedButton{visibility:hidden;}}@media (max-width:176px){.nofullscreen.chromecast.subtitles .p_chromecastButton,.nofullscreen.picInPic.subtitles .p_picInPicButton{visibility:hidden;}}@media (max-width:276px){.minimode.embed.subtitles .p_timeDisplay{visibility:hidden;}}@media (max-width:232px){.minimode.embed .p_timeDisplay,.minimode.subtitles .p_timeDisplay{visibility:hidden;}}@media (max-width:188px){.minimode .p_timeDisplay,.nofullscreen .p_timeDisplay{visibility:hidden;}}#p_threeSixtyCanvas{position:absolute;top:0;left:0;width:100%;height:100%;-ms-touch-action:none;touch-action:none;}.threeSixty .p_accessibleHitArea{display:none;}.threeSixty.cta .p_accessibleHitArea{display:block;}#p_compassContainer{width:134px;height:134px;position:absolute;top:0;left:0;background:transparent;border:0;padding:0;margin:0;outline:none;}@media (max-width:500px){#p_compassContainer{display:none;}}

</style>

And that is just the style element!

This is only a part of it due to forum character limit restrictions!!!

Here you go:

https://shorthand.com/

Thank you guys, yes editing source code looks way beyond me however that link alchresearch looks promising.

Here you go:

 

https://shorthand.com/

Guess how much? I put a site together using the shorthand code and it looked really good and I put a enquiry in on pricing (no mention on pricing at any stage before your site is complete). Guess how much? $3000 per year! They should at least hint at the price beforehand. Back to the drawing board.

Serif have discontinued WebPlus product line but you can still get WebPlus 8 via Currys:

https://www.currys.co.uk/gbuk/computing-accessories/software/creation-and-editing-software/serif-webplus-x8-10138868-pdt.html

With this software you can create gallaeries, roll-over popups, thumbnails of photos etc.

It is what I used to create my website.