Une page d’accueil originale et interactive

Une page d’accueil originale et interactive

 

See the Pen pvbEax by yuyazz (@yuyazz) on CodePen.

Le rendu est un peu crado mais appliquez le dans votre éditeur habituel pour un meilleur résultat . Les image logo sont bien entendu prises au hasard pour l’exemple..

Pour un entretien, j’ai du réaliser une page qui comporte des effets d’animation.J’utilise bootstrap pour structurer ma page et insérer un menu latéral repliable, chaffle.js pour appliquer un effet sur mon texte, et j’ai récupéré et quelque peu modifié un code jquery sur le site codepen pour un effet de particules en mouvement qui suivent le mouvement de la souris.

Je suis parti initialement d’un framework php simple, qui découpe les différentes sections du site en autant de fichiers.Header, index, footer etc…

Pour plus de simplicité, j’ai finalement tout réuni au sein d’un fichier index..Il faut au préalable charger bootstrap3 si vous voulez que la barre latérale notamment fonctionne, chaffle.js pour les effets sur le texte de description.

Voici ma page index.html en entier:

<!DOCTYPE html>
<html lang="fr">
<head>
	<title>Home</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="" />
	
		<link rel="shortcut icon" href="images/favicon.png" />
        <link href="css/bootstrap.css" rel="stylesheet" media="screen" />
     
		<link href="css/style.css" rel="stylesheet" />
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="js/bootstrap.min.js"></script>
        <script  type="text/javascript" src="js/chaffle.min.js"></script>
        <script  type="text/javascript" src="js/script.js"></script>
</head>   
<body>

<div id="wrapper" class="toggled">



         <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        SlashTv
                    </a>
                </li>
                <li>
                    <a href="#">Nos émissions</a>
                </li>
                <li>
                    <a href="#">A venir</a>
                </li>
                <li>
                    <a href="#">Evènements</a>
                </li>
                <li>
                    <a href="#">A Propos</a>
                </li>
                <li>
                    <a href="#">Services</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </div>        


<div id="page-content-wrapper">
     <img src="images/logo.png" alt="quote-left" style="max-width:100px" class="pull-right">
    <a class="btn btn-default" href=#menu-toggle" id="menu-toggle"><span class="glyphicon glyphicon-align-justify"></span></a>
    <div class="container-fluid">
        <div class="row">

            <div class="home-container">   
                 <canvas></canvas> 
                <div class="main-content">
                   
                    <div class="text-home">
                        <img src="images/logo.png" alt="quote-left" style="max-width:100%">
                        
                        <div class="line"></div>
                        <ul class="nav">
                           <li><a href="#" class="chaffle maj" data-lang="en"  >Votre</a></li>
                           <li><a href="#" class="chaffle maj" data-lang="en"  >Télévision</a></li>
                           <li><a href="#" class="chaffle maj" data-lang="en"  >Numérique</a></li>
                        </ul>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="footer">

</div>

</div>
  
   
</body>

</html>

Ma page css pour styliser tout ca :

html,body{height:100%;padding:0}

body {

    color: #333;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    line-height: 1.2;
    font-family: 'Lato', sans-serif;
    background-color:#fff ;
    overflow:hidden;
    overflow-x: hidden;
background: url(../images/poly_bg.jpg)no-repeat;
}

canvas{	position: absolute;top: 0;left: 0;right: 0;bottom: 0;height: 100%;width: 100%;}
.text-home{display:table-cell;vertical-align:middle;width: 403px;height:600px;text-align:center;}
.maj{text-transform:uppercase}
.home-container{height:100%;position: relative;}
.main-content{display:table;vertical-align:middle;margin-right: auto;margin-left: auto;text-align:center;}
.chaffle{background:none;background-color:transparent;color:#000;float:left}
.nav > li > a:hover, .nav > li > a:focus {text-decoration: none;background-color: transparent;color:#000;}
.nav {padding-left: 3em;}
 .line {top: 0;left: 0;right: 0;width: 30px;margin: 1em auto;border: 1px solid rgba(50, 50, 50, 0.9);}
/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

Et bien sur la page pour les effets jquery: (je l’ai appelé script.js)


/* FUNCTIONS BASE JS */
function goTo(element) {
	jQuery('html, body').animate({scrollTop: (jQuery(element).offset().top)-170}, 500, function(){});
}


//Menu latéral toggle & lettring
jQuery(function() {
	
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    $(document).ready(function() {
     $('.chaffle').chaffle({
      speed: 20,
      time: 140
    });
   });
});

//effets background particules

    (function() {
        setInterval(function() {
            var now, timestamp;
            timestamp = new Date(1987, 5, 30);
            now = new Date();
            return $('#time').text(((now - timestamp) / 1000).toFixed(0));
        }, 1000);
    }).call(this);

    $(window).on('resize', function() {
        reinit();
    });

//CANVAS
    $(function() {
        var canvas = document.querySelector('canvas'),
                ctx = canvas.getContext('2d'),
                color = '#000';
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        canvas.style.display = 'block';
        ctx.fillStyle = color;
        ctx.lineWidth = .1;
        ctx.strokeStyle = color;

        var mousePosition = {
            x: 30 * canvas.width / 65,
            y: 30 * canvas.height / 65
        };

        var dots = {
            nb: 150,
            distance: 100,
            d_radius: 150,
            array: []
        };

        function Dot() {
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;

            this.vx = -.5 + Math.random();
            this.vy = -.5 + Math.random();

            this.radius = Math.random();
        }

        Dot.prototype = {
            create: function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fill();
            },
            animate: function() {
                for (i = 0; i < dots.nb; i++) {

                    var dot = dots.array[i];

                    if (dot.y < 0 || dot.y > canvas.height) {
                        dot.vx = dot.vx;
                        dot.vy = -dot.vy;
                    }
                    else if (dot.x < 0 || dot.x > canvas.width) {
                        dot.vx = -dot.vx;
                        dot.vy = dot.vy;
                    }
                    dot.x += dot.vx;
                    dot.y += dot.vy;
                }
            },
            line: function() {
                for (i = 0; i < dots.nb; i++) {
                    for (j = 0; j < dots.nb; j++) {
                        i_dot = dots.array[i];
                        j_dot = dots.array[j];

                        if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {
                            if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) {
                                ctx.beginPath();
                                ctx.moveTo(i_dot.x, i_dot.y);
                                ctx.lineTo(j_dot.x, j_dot.y);
                                ctx.stroke();
                                ctx.closePath();
                            }
                        }
                    }
                }
            }
        };

        function createDots() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            for (i = 0; i < dots.nb; i++) {
                dots.array.push(new Dot());
                dot = dots.array[i];

                dot.create();
            }

            dot.line();
            dot.animate();
        }

        $('canvas').on('mousemove mouseleave', function(e) {
            if (e.type == 'mousemove') {
                mousePosition.x = e.pageX;
                mousePosition.y = e.pageY;
            }
            if (e.type == 'mouseleave') {
                mousePosition.x = canvas.width / 2;
                mousePosition.y = canvas.height / 2;
            }
        });
        setInterval(createDots, 1000 / 30);
    });

M’étant servi de code open source pour réaliser cette page, je partage également ce que j’ai fait. Je n’ai rien changé à l’apparence de la page, tout n’est qu’exemple, mais il va sans dire qu’il ne faut pas copier coller bêtement le code à l’identique, et tenter de restituer exactement la même page en changeant juste le logo, par exemple. Je me suis servi volontairement de l’exemple d’un site déjà existant, vous risqueriez donc tout simplement de copier le design d’un autre site. Servez vous donc juste du code pour le restituer à votre façon!! :  )

Mis à jour le Par Copier coller | Dans CSS, jQuery