плавный переход между html-страницами - PullRequest
Новая
       33

плавный переход между html-страницами

1 голос
/ 30 апреля 2011

Когда я нажимаю на ссылку, например, в index.html и нажимаю «контакт», который является внешним «contact.html», я хочу создать плавный переход. Дайте мне несколько советов ...

Пример: 

<a id="map"  href="otherPage.html" target="_self">
     <img src="images/icons/map.png" width="100" height="100">
</a>

Я не хочу, чтобы otherPage.html загружался немедленно, я хочу, чтобы он отображался очень плавно / медленно

Ответы [ 4 ]

2 голосов
/ 08 апреля 2014

попробуйте 

var speed = 'slow';

$('html, body').hide();

$(document).ready(function() {
    $('html, body').fadeIn(speed, function() {
        $('a[href], button[href]').click(function(event) {
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0 || url.indexOf('javascript:') == 0) return;
            event.preventDefault();
            $('html, body').fadeOut(speed, function() {
                window.location = url;
            });
        });
    });
});
1 голос
/ 30 апреля 2011

вы можете использовать ajax-навигационную систему.
Когда вы нажимаете на ссылку, вы отправляете ajax-запрос для нужной страницы и отображаете ее содержимое на текущей странице (без ее обновления).

вот пример сайта, который я построил с использованием той же техники «плавной навигации»: http://www.opisband.ro/

0 голосов
/ 08 апреля 2014

Проверьте этот веб-сайт: http://www.marcocali.com/ и соответствующий JS: http://www.marcocali.com/public/js/index.js?v=4

0 голосов
/ 22 марта 2013

Для этого вы можете использовать jquery: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

Поместите файлы css и js в фоллер css и js вашего веб-сайта и добавьте на каждую страницу нужную функцию плавного перехода: 

    <link rel="stylesheet" type="text/css" title="default" href="css/main.css">
    <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
...