ungleich landing page animation delay reduced, direction changed

This commit is contained in:
Arvind Tiwari 2017-11-01 02:50:47 +05:30
parent 6ff2a57e08
commit 16f8ab6ecc
5 changed files with 31 additions and 41 deletions

View file

@ -2,16 +2,16 @@
$(function(){ $(function(){
new WOW().init(); new WOW().init();
$('.img-toggle').one('mouseover', toggleImage); $('.img-toggle').one('mouseenter', toggleImage);
}); });
function toggleImage(e) { function toggleImage(e) {
var $this = $(this), var $this = $(this),
toggle_img = $this.attr('data-replaced'), toggle_img = $this.attr('data-replaced'),
current_img = $this.attr('src'); current_img = $this.attr('src');
$this.fadeOut(600, function() { $this.fadeOut(200, function() {
$this.attr('src', toggle_img); $this.attr('src', toggle_img);
$this.attr('data-replaced', current_img); $this.attr('data-replaced', current_img);
$this.fadeIn(900); $this.fadeIn(300);
}); });
}; };

View file

@ -1,5 +1,4 @@
{% load static %} {% load static i18n %}
{% load i18n %}
<section id="about"> <section id="about">
<div class="container"> <div class="container">

View file

@ -62,12 +62,6 @@
</div> </div>
</form> --> </form> -->
</div> </div>
<p>&nbsp;</p>
</div>
<div class="row">
<div class="col-lg-12">
</div>
</div> </div>
</div> </div>
</section> </section>

View file

@ -10,7 +10,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-4 col-sm-6 portfolio-item wow fadeInDown" data-wow-delay="0.5s"> <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.25s">
<a href="{% url 'datacenterlight:index' %}"><img src="{% static 'ungleich_page/img/portfolio/datacenterlight.png' %}" class="img-responsive inline-block" alt=""></a> <a href="{% url 'datacenterlight:index' %}"><img src="{% static 'ungleich_page/img/portfolio/datacenterlight.png' %}" class="img-responsive inline-block" alt=""></a>
<div class="portfolio-caption inline-block"> <div class="portfolio-caption inline-block">
<h4>{% trans "Data Center Light" %}</h4> <h4>{% trans "Data Center Light" %}</h4>
@ -18,7 +18,7 @@
<p class="text-muted">{% trans "We offer the most affordable hosting in Switzerland. Data Center Light has full FOSS stack, 100% IPv6 and 100% SSD. Choose any configuration among CentOS, Debian, Ubuntu, Devuan, and FreeBSD." %} </p> <p class="text-muted">{% trans "We offer the most affordable hosting in Switzerland. Data Center Light has full FOSS stack, 100% IPv6 and 100% SSD. Choose any configuration among CentOS, Debian, Ubuntu, Devuan, and FreeBSD." %} </p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item wow fadeInDown" data-wow-delay="1s"> <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.5s">
<a href="{% url 'rails.hosting' %}"><img src="{% static 'ungleich_page/img/portfolio/startup-framework.png' %}" class="img-responsive inline-block" alt=""></a> <a href="{% url 'rails.hosting' %}"><img src="{% static 'ungleich_page/img/portfolio/startup-framework.png' %}" class="img-responsive inline-block" alt=""></a>
<div class="portfolio-caption inline-block"> <div class="portfolio-caption inline-block">
<h4>{% trans "Rails Hosting" %} </h4> <h4>{% trans "Rails Hosting" %} </h4>
@ -26,7 +26,7 @@
<p class="text-muted">{% trans "Ready to go live with your Ruby on Rails application? We offer you ready-to-deploy virtual machines or configure your existing infrastructure for Ruby on Rails." %}</p> <p class="text-muted">{% trans "Ready to go live with your Ruby on Rails application? We offer you ready-to-deploy virtual machines or configure your existing infrastructure for Ruby on Rails." %}</p>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 portfolio-item wow fadeInDown" data-wow-delay="1.5s"> <div class="col-md-4 col-sm-6 portfolio-item wow fadeInUp" data-wow-delay="0.75s">
<a href="{% url 'datacenterlight:glasfaser' %}"><img src="{% static 'ungleich_page/img/portfolio/glasfaser.png' %}" class="img-responsive inline-block" alt=""></a> <a href="{% url 'datacenterlight:glasfaser' %}"><img src="{% static 'ungleich_page/img/portfolio/glasfaser.png' %}" class="img-responsive inline-block" alt=""></a>
<div class="portfolio-caption inline-block"> <div class="portfolio-caption inline-block">
<h4>{% trans "High Speed Internet" %}</h4> <h4>{% trans "High Speed Internet" %}</h4>

View file

@ -3,18 +3,16 @@
<section id="services"> <section id="services">
<div class="container"> <div class="container">
<div class="row"> <div class="text-center wow fadeInDown">
<div class="col-lg-12 text-center wow fadeInDown">
<h2 class="section-heading">{% trans "our services" %}</h2> <h2 class="section-heading">{% trans "our services" %}</h2>
<h3 class="section-subheading text-muted"> <h3 class="section-subheading text-muted">
{% trans "We support our clients in all areas of Unix infrastructure." %}<br/> {% trans "We support our clients in all areas of Unix infrastructure." %}<br/>
{% trans "Our top notch configuration management is refreshingly simple and reliable." %} {% trans "Our top notch configuration management is refreshingly simple and reliable." %}
</h3> </h3>
</div> </div>
</div>
<div class="row text-center"> <div class="row text-center">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="0.5s"> <div class="team-member wow fadeInUp" data-wow-delay="0.25s">
<img src="{% static 'ungleich_page/img/team/5.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/hosting.png' %}" class="img-responsive img-circle img-toggle" alt=""> <img src="{% static 'ungleich_page/img/team/5.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/hosting.png' %}" class="img-responsive img-circle img-toggle" alt="">
<div class="team-member-caption inline-block"> <div class="team-member-caption inline-block">
<h4 class="portfolio-caption">{% trans "Hosting" %}</h4> <h4 class="portfolio-caption">{% trans "Hosting" %}</h4>
@ -24,22 +22,21 @@
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="1s"> <div class="team-member wow fadeInUp" data-wow-delay="0.5s">
<img src="{% static 'ungleich_page/img/team/4.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/configuration.png' %}" class="img-responsive img-circle img-toggle" alt=""> <img src="{% static 'ungleich_page/img/team/4.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/configuration.png' %}" class="img-responsive img-circle img-toggle" alt="">
<div class="team-member-caption inline-block"> <div class="team-member-caption inline-block">
<h4 class="portfolio-caption">{% trans "Configuration as a Service" %}</h4> <h4 class="portfolio-caption">{% trans "Configuration as a Service" %}</h4>
<p>&nbsp;</p> <p>&nbsp;</p>
<p><span class="text-muted">{% trans "Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you." %}</span></p> <p><span class="text-muted">{% trans "Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you." %}</span></p>
<p class="text-muted">&nbsp;</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<div class="team-member wow fadeInDown" data-wow-delay="1.5s"> <div class="team-member wow fadeInUp" data-wow-delay="0.75s">
<img src="{% static 'ungleich_page/img/team/6.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt=""> <img src="{% static 'ungleich_page/img/team/6.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt="">
<h4 class="portfolio-caption">{% trans "Linux System Engineering" %}</h4>
<p class="text-muted">&nbsp;</p>
<div class="team-member-caption inline-block"> <div class="team-member-caption inline-block">
<h4 class="portfolio-caption">{% trans "Linux System Engineering" %}</h4>
<p>&nbsp;</p>
<p class="text-muted">{% trans "Let your developers develop! We take care of your system administration. Gentoo, Archlinux, Debian, Ubuntu, and many more." %}</p> <p class="text-muted">{% trans "Let your developers develop! We take care of your system administration. Gentoo, Archlinux, Debian, Ubuntu, and many more." %}</p>
</div> </div>
</div> </div>