Django搭建网络相册:模态与动画

330 views, 2021/08/09 updated   Go to Comments

如何展示图片的细节有很多种方法。作为一个小巧的相册网站,不需要给每张照片单独的详情页面,而是用浮窗的形式就足够了。

本章将用模态窗和动画的搭配,实现单页面图片展示的功能。

这更多的是模板部分的内容。

悬浮动画

动画是产品精致程度的体现,好的动画可以让用户感觉非常舒适。

随着前端技术的发展,仅靠 css 也可以实现相当精美的动画,并且有很多现成可参考的代码。

比如下面这段鼠标悬停后,元素悬浮的动画。

在项目根路径新建 /static/hover.css 文件,写入:(直接复制即可,暂时不用深究细节)

/* /static/hover.css */

/* 此样式来自 Hover.css */
/* https://ianlunn.github.io/Hover/ */
/* Float Shadow */
.hvr-float-shadow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: 5%;
height: 10px;
width: 90%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
/* W3C */
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
/* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
opacity: 1;
-webkit-transform: translateY(5px);
transform: translateY(5px);
/* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

css 文件与媒体文件类似,都属于静态文件,Django 默认是不处理它们的。

因此需要修改全局配置,指定此类文件的存放路径:(就是 hover.css 的路径)

# /album/settings.py

...
# 修改
STATIC_URL  = '/static/'
# 新增
STATICFILES_DIRS = (
    BASE_DIR / 'static',
)

接着同样的,将其注册到 url 路径中:

# /album/urls.py

...
urlpatterns = [
    ...
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

然后就可以像下面这样,在 base.html 中引入它了:

<!-- /templates/base.html -->

...
  <head>
    ...
    {% load static %}
    <link rel="stylesheet" href="{% static 'hover.css' %}">
  </head>
...
  • {% load static %} 标签载入静态文件相关的全局配置。
  • {% static 'hover.css' %} 载入此 css 文件的实际地址。

使用也很简单,你想要哪个元素带有鼠标悬停悬浮效果,在元素标签里加 class="hvr-float-shadow" 就可以了。

像这样修改 list.html

<!-- /templates/photo/list.html -->

...
{% for photo in photos %}
<div class="...">
    <div class="... hvr-float-shadow">
        ...
    </div>
</div>
{% endfor %}
...

刷新页面并将鼠标悬停在图片卡片上,它就有向上腾空的动画了。

如果无此效果,检查浏览器控制台是否有 404 报错。有就表示静态文件载入失败。

模态窗

模态窗是指平铺在页面上的一个窗口,并且带有背景遮罩的效果。Bootstrap 自带的模态窗就非常够用了。

继续修改 list.html 代码对应位置:

<!-- /templates/photo/list.html -->

...
{% block content %}
...
{% for photo in photos %}
<div class="col-4 py-2">
    <div class="card hvr-float-shadow">
        <!-- 修改了这里 -->
        <a 
           href="#"
           data-bs-toggle="modal" 
           data-bs-target="#photo-{{ photo.id }}"
           >
            <img 
                 src="{{ photo.image.url }}" 
                 alt=""
                 class="card-img"
                 >
        </a>
        <!-- ******* -->
    </div>
</div>
{% endfor %}
...

<!-- 新增了这里 -->
<!-- 注意下面这部分代码不能直接写在卡片的 for 循环中 -->
{% for photo in photos  %}
<!-- Modal -->
<div class="modal fade" id="photo-{{ photo.id }}">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                <img 
                     src="{{ photo.image.url }}" 
                     alt=""
                     class="card-img"
                     >
            </div>
        </div>
    </div>
</div>
{% endfor %}
<!-- ************ -->

{% endblock content %}
  • 图片被超链接标签 <a ...> 包裹,点击则触发模态窗打开的事件。
  • data-bs-toggle 属性指定了当前元素为模态窗。
  • data-bs-target 的值要严格对应模态窗的 id 值,Bootstrap 依据此来链接多个按钮和模态窗的映射关系。

保存后刷新页面,点击图片,漂亮的模态窗就滑动出来了:

总结

本章的内容比较简单,代码量不多但是视觉效果是很好的,这就是动画的魅力。

模态窗的优点是页面不会跳转,这使得你的网站使用起来连续性非常好。跳转使用户感觉烦躁,并且说不定某次跳转时就离开你的页面了。另一方面,模态窗适合展示较少的信息,大量信息还是老老实实跳转页面吧。

点赞 or 吐槽?来评论区!




本文作者: 杜赛
发布时间: 2021年08月09日 - 10:19
最后更新: 2021年08月09日 - 10:19
转载请保留原文链接及作者
本站使用 Github 评论后端。鉴于国内复杂的网络环境,如遇评论无法加载、发表等问题,请尝试刷新页面,或更换上网姿势。