Innovative website design!

I see more and more websites with a similar style as this one and this one (click on project and select ELEVATR for example). I mean interactive content, animations as the user scrolls down the page, nice fonts, slick layout, etc. Are those websites programmed using html5 / Javascript / Flash? Is there a basic website template available somewhere? Or at least a Javascript library for all these animations?

 

Everything is HTML, Javascript/jQuery and CSS3. You can look on Themeforest dot net for more such templates. Sadly they aren't available for free. But there are many blogs who provide free tutorials for such tricks.
For smooth scroll, just Google search "thepetedesign jquery jump".
For Fonts, try "Google fonts" or "adobe edge fonts".
CSS3 can do a lot of magic since additions of animations and transitions!

 

They are both HTML5 and make extensive use of advance CSS3. You are not going to find templates to duplicate them. They contain a lot of custom code. If you want to raise your game to produce stuff similar to that then you need to develop advanced skills in markup, CSS, javascript and svg.

You may find plugins, themes, and templates that will do some of the pieces; but when you start trying to put them together you will just create another bloated load of crap to add to the thousands of other sites written by amateurs loking for easy magic instead of learning the technical underpinning that goes into special effects.

 

Well, landing pages have to be beautiful! And yes, they are all using HTML5, CSS3, JS and jQuery for the maximum effect. Animations, positioning, styles, fonts, sliders - everything. Take a look at mobile application development website. This is a perfect example of landing page. It has to attract you, drag your attention with a good look and structured information. Honestly, i wouldn't say that making landing page is that hard but depends on what do you want to do it can turn into hell sometimes If you want to learn how to do that, i'd recommend you to start with HTML5 and CSS3 (you will need a lot of practice) and slowly go to JS and jQuery (you will need even more practice).

 

If you know HTML + CSS and a bit of JS + JQuery, you might just watch the source code and see how it works and then you can apply that code for your website.

 

First off the use of the word 'innovative' is inappropriate -- since people were pulling these types of flashy "gee ain't it neat" garbage with flash for well over a decade and a half.

Second, it remains little more than polishing a turd more often than not used to cover up for a lack of content of value, and in the process flipping a double bird at usability and accessibility which is why such sites would NEVER pass WCAG 2.0 compliance. They are bloated slow train-wrecks that lack anything of value, and really shouldn't be impressing anyone unless they have the mental capacity of a fifth grader.

It's a stupid flashy stunt, the likes of which we've seen crop up repeatedly time and time again and fail to be anything more than shellac on a pile almost from the day JavaScript and Flash were introduced -- and unless you're entire intent is marketing scam hoodoo-voodoo it's NOT something I'd be suggesting you do on a website.

We need less and less such websites since they're just bandwidth wasting incompetent bullshit used by people who REALLY have no business making websites in the first place.

As evidenced by such ineptly coded manure as:

<div class="top-menu">
    <div class="wrapper">         
    <a id="mobileMenu" class="show-mobile"><i class="icon-ellipsis-vert"></i></a>
    <a href="view_cart.asp" id="mobileCart" class="show-mobile"><i class="icon-basket"></i></a>
    <span class="greeting"><img src="assets/templates/techmaster-html5/images/phone.png" alt="">  ---- | <img src="assets/templates/techmaster-html5/images/person.png" alt="">  <!--START: login-->Welcome, <span>Guest</span> <span class="bullet">&bull;</span> <a href="myaccount.asp">Login</a><!--END: login--><!--START: username--><!--END: username-->  | <img src="assets/templates/techmaster-html5/images/shopping-cart-white.png" alt="">  <a href="/view_cart.asp">View Cart</a></span>
    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="showSlideMenu">
      <a id="closeSlideMenu" class="show-mobile"><i class="icon-cancel-circled"></i></a>
      <ul>
        <li class="m-search show-mobile">
          <div>
            <form method="get" name="mSearchForm" action="search.asp">
              <input type="text" name="keyword" value="" placeholder="Search" />
              <button name="search"><i class="icon-search"></i></button>
              <div class="clear"></div>
            </form>
          </div>
        </li>        
        <div id="FRAME_MENU" ><!--START: FRAME_MENU-->
          <!--START: menuitems_view-->          

Code (markup):